Text input

Text input allows a user to enter information as part of a form.

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.

  • Interactive demo - Sainsbury's

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.

  • Interactive demo - Sainsbury's

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.

  • Interactive demo - Sainsbury's

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.

  • Interactive demo - Sainsbury's

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.

  • Interactive demo - Sainsbury's
  • Interactive demo - Sainsbury's

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.

  • Interactive demo - Sainsbury's
  • Interactive demo - Sainsbury's

Was this page helpful?


Get in touch

Our team can answer any questions about using text inputs or give you a helping hand with your next project.
Select a theme to demo: