Skip to main content

Text input

Use the text input component when you need to let users enter text that's no longer than a single line, such as their name or phone number.

Don't use a text input if you need to let users enter text that will span multiple lines, use a textarea component instead.

With label​

With label and hint​

With error​

Display an inline error when there's something wrong.

Make sure:

  • The form control has the aria-describedby attribute and references an associated error message
  • The associated error message has a unique ID

Remove the error state when the input is updated, to avoid confusing users.

To do this:

  • Remove the field--error class
  • Remove the <div> element with the class field__message field__message--error

Clear the input to reset the error state in this example.

You need to tell us your name

Width of text input field​

Help users understand what they should enter by adjusting the size of the text input field according to the size of the expected input.

For example, use the shorter width for a field where the input will be a number.

Autocomplete​

Use the autocomplete attribute on text inputs to help users complete forms. This lets you specify an input's purpose so browsers can autofill the information on a user's behalf if they've entered it previously.