Airframe GitHub Storybook
Component

ba-input-text

A form field for entering small amounts of text

Airframe

Active
Figma

Web Components

Active
Storybook Github

React

Active
Storybook Github

React Native

Planned Design Code Accessibility QA

Anatomy

A

Label

A short, descriptive text that identifies the purpose of the input field
B

Hint text (optional)

Additional guidance below the label to help users complete the field correctly
C

Input field

The text entry area where users type their response
D

Error message

Inline validation feedback that appears when the input value does not meet the required constraints

Design Documentation

This component should only be used for entering small amounts of text such as names or parts of an address. If more text is required to be entered use the ba-input-textarea component.

Live Demo 

<ba-input-text label="Label text" name="firstName" hint-text="Custom hint text" required></ba-input-text>

Properties and attributes

Property Attribute Description Type Default
autocomplete autocomplete The autocomplete setting string | undefined 'on'
hintText hint-text Hint text to show above the input string | undefined undefined
inputWidth input-width The width of the input in characters string | undefined undefined
invalid invalid Whether the input is invalid boolean | undefined false
label(required) label A label for the input string undefined
maxLength max-length Max amount of characters allowed in validation string | undefined undefined
minLength min-length Min amount of characters allowed in validation string | undefined undefined
name(required) name The name of the input string undefined
required required Whether the input is required boolean | undefined false
value value The value of the input string | undefined ''

Permitted ARIA roles

  • None

Slots

Slot Description Permitted elements
"error" Element will be rendered in the error slot <p>
"error-required" Element will be rendered in the error-required slot <p>
"error-min-length" Element will be rendered in the error-min-length slot <p>
"error-max-length" Element will be rendered in the error-max-length slot <p>

Parent components

ba-input-text can be slotted into:

Events

Event Description Type
baBlur Emitted when the input loses focus. CustomEvent<void>
baFocus Emitted when the input has focus. CustomEvent<void>
baOnInput Emitted when a keyboard input occurred. CustomEvent<KeyboardEvent>
baSubmit Emitted when the user submits the form from within the component CustomEvent<void>

Usage

Basic usage

Most scenarios will only require the label attribute and a name.

A simple text input
<ba-input-text label="Label text" name="input-text" required></ba-input-text>

Help text

It is sometimes useful to add hint text.

A text input that has hint text
<ba-input-text label="Label text" name="input-text" hint-text="Custom hint text" required></ba-input-text>

Min/max characters

You can specify a minimum and maximum length of characters.

Specifying a minimum and maximum length of characters
<ba-input-text name="text-input" label="Input text" min-length="2" max-length="6"></ba-input-text>

Required

You can set the field to be required.

Setting the field as required
<ba-input-text name="text-input" label="Input text" required></ba-input-text>

Custom error messages

BAgel provides error messages with translations for required, minimum length, and maximum length. These can be customised using slots.

Specifying custom validation errors
<ba-input-text name="text-input" label="Input text" required min-length="2" max-length="6">
  <p slot="error-required">Custom required error</p>
  <p slot="error-min">Custom min length error</p>
  <p slot="error-max">Custom max length error</p>
</ba-input-text>

Override all error messages

You can override all error messages with the error slot.

Overriding all error messages
<ba-input-text name="text-input" label="Input text" required min-length="2" max-length="6">
  <p slot="error">This will override all error messages</p>
  <p slot="error-required">Custom required error</p>
  <p slot="error-min">Custom min length error</p>
  <p slot="error-max">Custom max length error</p>
</ba-input-text>

Custom validation

You can provide your own custom validation using events and props.

Custom validation
<ba-input-text name="text-input" label="Input text" required>
  <p slot="error">Custom error message</p>
</ba-input-text>

<script>
  const textInput = document.querySelector('ba-input-text');
  textInput.addEventListener('baOnInput', (e) => {
    const value = e.detail.value;

    // Do your custom validation here.
    //
    //
    // Then set the input to invalid
    textInput.setAttribute('invalid')
  })
</script>

Props

Prop Description Type Default
autocomplete The autocomplete setting string | undefined 'on'
hintText Hint text to show above the input string | undefined undefined
inputWidth The width of the input in characters string | undefined undefined
invalid Whether the input is invalid boolean | undefined false
label (required) A label for the input string undefined
maxLength Max amount of characters allowed in validation string | undefined undefined
minLength Min amount of characters allowed in validation string | undefined undefined
name (required) The name of the input string undefined
required Whether the input is required boolean | undefined false
value The value of the input string | undefined ''
error Element will be rendered in the error slot <p>
errorRequired Element will be rendered in the error-required slot <p>
errorMinLength Element will be rendered in the error-min-length slot <p>
errorMaxLength Element will be rendered in the error-max-length slot <p>

Permitted ARIA roles

None

Parent components

BaInputText can be slotted into:

Event handlers

Event handler Description
onBaBlur Emitted when the input loses focus.
onBaFocus Emitted when the input has focus.
onBaInput Emitted when a keyboard input occurred.
onBaSubmit Emitted when the user submits the form from within the component

Methods

Method Description
isValid() => Promise<boolean> Triggers required validation and resolves with validity state.
reset() => Promise<void> Resets the select back to its initial value and validity.

Usage

Basic usage

Most scenarios will only require the label attribute and a name.

A simple text input
<BaInputText label="Label text" name="input-text" />

Help text

It is sometimes useful to add hint text.

A text input that has hint text
<BaInputText label="Label text" name="input-text" hintText="Custom hint text" required />

Min/max characters

You can specify a minimum and maximum length of characters.

Specifying a minimum and maximum length of characters
<BaInputText name="text-input" label="Input text" minLength="2" maxLength="6" />

Required

You can set the field to be required.

Setting the field as required
<BaInputText name="text-input" label="Input text" required />

Custom error messages

BAgel provides error messages with translations for required, minimum length, and maximum length. These can be customised using slots.

Specifying custom validation errors
<BaInputText
  name="text-input"
  label="Input text"
  required
  minLength="2"
  maxLength="6"
  errorRequired="Custom required error"
  errorMinLength="Custom min length error"
  errorMaxLength="Custom max length error" />

Override all error messages

You can override all error messages with the error slot.

Overriding all error messages
<BaInputText
  name="text-input"
  label="Input text"
  required
  minLength="2"
  maxLength="6"
  error="This will override all error messages"
  errorRequired="Custom required error"
  errorMinLength="Custom min length error"
  errorMaxLength="Custom max length error" />

Custom validation

You can provide your own custom validation using events and props.

Custom validation
export default function CustomValidationExample() {
  const [inputInvalid, setInputInvalid] = useState(false);

  const customValidation = (event: { value: string }) => {
    // Do custom validation here

    // Set the input to invalid
    setInputInvalid(true)
  }
  return (
    <BaInputText
      label="First name"
      hintText="Please enter your first name"
      name="input-text"
      invalid={inputInvalid}
      onBaInput={customValidation}
      error="Custom error text" />
  );
}

React Native documentation coming soon.

Guidelines

Always use the label attribute to give a meaningful label to the field.

Further reading:

Disabled form elements are not supported in BAgel because they create accessibility challenges, such as preventing keyboard navigation, confusing screen reader users, and reducing visual clarity for those with impairments

Further reading:

Placeholders on inputs are not supported in BAgel because they create accessibility challenges, such as failing to provide persistent labels for screen readers, reducing color contrast for users with visual impairments, and causing confusion for those with cognitive difficulties.

If you would like to add a infomations to help the user fill the input, you can use the hint-text attribute.

Further reading:

Keyboard navigation

State: Previous element in DOM has focus

⇥ Tab

Moves focus to the ba-input-text input field

State: ba-input-text input has focus

⇥ Tab

Moves focus to the next focusable element

Moves focus to the previous focusable element

Usage and accessibility checklist

Use this checklist to confirm the component has been configured and used correctly.

UX checklist

  • ba-input-text is only used for short, single-line text entry (names, addresses, short codes)
  • ba-input-textarea is used instead when users need to enter longer or multi-line text
  • A concise and descriptive label has been provided
  • Hint text is used when the expected format or constraints may not be obvious to the user
  • Required fields are marked with the required attribute
  • min-length and max-length are set where the input has known character constraints

Accessibility checklist

  • A meaningful label is provided via the label attribute
  • Hint text is used in preference to placeholder text, which is not supported
  • Error messages are descriptive and explain how to resolve the validation failure
  • The field is keyboard operable and receives a visible focus indicator
  • The disabled state is not used — ba-input-text does not support disabled inputs

These checks are handled by the component and do not need to be repeated each time it is used.

  • Colour contrast meets WCAG AA for text and border in all states (default, focus, error)
  • The component renders correctly in Windows High Contrast Mode
  • Animation and transitions respect the prefers-reduced-motion media query
Designing Developing Components BAgel helper QA process britishairways.com Careers Cookie policy