Text input

How to use text input

Text inputs are used in forms so that users can input data. They help users to understand what data they need to supply to progress.

When using a text input:

• Use a label to explain exactly what data is required
• If fields are optional, add '(optional)' to the relevant label
• Programmatically connect the label to the input field
• Use appropriate HTML attributes to help the user to input data in the correct format

Types of text input

Standard

Use a label to make it clear what data is needed. Make sure the label is programmatically connected to the input field so the purpose of the input field will be announced to screen reader users.

<TextInputField name="text-input-field-1" label="Username" />

With required indicator

Use required to indicate that a field is required

<TextInputField name="text-input-field-2" required="*" label="Username" />

With supporting text

If there’s more to say than can fit in the label, use supporting text.

If there are specific requirements on format, make that clear before the user tries to submit in the wrong format and sees an error message.

<TextInputField
  name="text-input-field-2"
  info="This can't include spaces"
  label="Username"
/>

With placeholder text

Placeholder text can be used to provide an example of the type of data that is expected.

Placeholder text disappears when the field receives focus. Because of this, it shouldn’t be essential for a user to progress, or the only piece of information a user gets about a field.

<TextInputField
  name="text-input-field-4"
  label="First name"
  placeholder="Example: Mary"
/>

With error message

Use an error message if the user can’t complete their action without making a change.

Use ARIA to alert screen reader users to the error message.

You can read guidance about how to write error messages here.

<TextInputField
  name="text-input-field-3"
  label="Username"
  error="Sorry this username is already taken"
  defaultValue={`Luna${new Date().getFullYear()}`}
/>

With icon

Icons can be used within the field to support the label.

Icons shouldn’t be needed to understand the input field and shouldn’t be able to receive focus.

<TextInputField
  name="text-input-field-5"
  label="Date of birth"
  icon={<Calendar />}
/>

<TextInputField
  name="text-input-field-6"
  label="Voice search"
  action={
    <Button>
      <span className="ln-u-visually-hidden">Use microphone input</span>
      <VoiceSearch />
    </Button>
  }
/>

With buttons

When an action is directly tied to a field, then a button can be shown inside or grouped with the input.

The button must have a text or text alternative accessible name.

<TextInputField
  name="text-input-field-8"
  label="Search"
  button={<SearchButton />}
/>

<TextInputField
  name="text-input-field-7"
  label="Delivery location"
  icon={
    <label htmlFor="text-input-field-5" aria-hidden tabIndex="-1">
      <StoreLocation />
    </label>
  }
  action={
    <Button>
      <span className="ln-u-visually-hidden">Use current location</span>
      <Geolocation />
    </Button>
  }
/>

Was this page helpful?