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:

• Always use a label to explain exactly what text or 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

If the user needs to enter text into a field to search for something, use a search instead.

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.

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.

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.

When using placeholder text:

• Always accompany placeholder text with a clear label
• Only provide a clear example of the data expected
• Don't use placeholder text to define the requirements of the field
• Make sure the placeholder text has sufficient colour contrast so it's possible to read (you can check the colour contrast of your text with the WebAIM colour contrast checker)

Where possible, use supporting text instead of placeholder text if the user needs more information to progress.

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.

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.

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.

Was this page helpful?