Text input allows a user to enter information as part of a form.
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
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.
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.
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.
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.