Text fields typically reside in forms but can appear in other places, like dialog boxes and search.
Text fields validate input, help users fix errors, autocomplete words, and provide suggestions.
Single-line
Multi-line
Text area
Formatted inputs
Nested menus & pickers
Text fields should have the following characteristics:
Using a tappable touch target, text fields should indicate that users can enter information.
It should be easy to find a text field among other elements.
Text fields should indicate their state – whether enabled or disabled, empty or filled, valid or invalid – with clear label, input, and assistive text.
Text fields contain the following elements:
Text field labels display the type of input a field requires. Every text field should have a label.
Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating.
The input line indicates where to enter text, displayed below the label.
When a field is active or contains an error, the line’s color and thickness vary.
The cursor indicates the user’s current input position.
In forms with some required fields, indicate all of the required ones. However, if there are fewer optional fields, indicate those instead.
Name and zip code are the only required fields in the form.
Description is the only optional field in the form.
Text fields have two major states: enabled or disabled.
In the enabled state, these user interactions are available:
Text field is disabled.