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 classfield__message field__message--error
Clear the input to reset the error state in this example.
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.