Text fields allow users to input, edit, and select text.
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.
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.
Text entered into a text field is called input text.
The first letter of input text (and each sentence in a field) should be capitalized where appropriate. Such as text that:
Names something, like an alarm
Contains phrases, like a text message
Input text can be used with autocomplete to help users who have limited literacy or who write in a foreign language. For example, autocomplete can:
Suggest input as it’s typed (refreshing suggestions with each keystroke)
Fill a field with default input text
Pressing the return button accepts the current autocomplete suggestion.
Placeholder text (Hint text)
Placeholder text rests in the input field until the user starts entering text. It may contain an action or an example, such as a phone number or email address.
Helper text gives context about a field’s input, such as how the input will be used.
It should be visible either persistently or only on focus.
On a single line if possible, or with text wrapping (if multiple lines)
When input isn’t accepted, text fields can display an error message below the input line, with instructions on how to fix the error. Until the error is fixed, the error replaces the helper text.
An error message should appear on a single line, if possible.
An error message is preceded by the word “Error” (or an error icon) to make the error state more distinct to colorblind users.
To indicate that a field is required, display an asterisk (*) next to its label. At the bottom of the form, mention that asterisks indicate required fields.
To indicate that a field is optional, display the word “optional” in parentheses next to the field label.
In forms with some required fields, indicate all of the required ones. However, if there are fewer optional fields, indicate those instead.
Character or word counter
Use character or word counters where there is a character or word limit.
Displayed as a ratio of characters used and the character limit (formatted as: characters used / character limit)
Icons describe the type of input a text field requires. They are displayed to the left of the text field.
Icons can also be touch targets for nested components. For example, a calendar icon may be tapped to reveal a date picker.
Voice input icon
A microphone icon signifies that users can input characters using voice.
Voice input icons are right justified, and always enabled.
A dropdown arrow indicates that a text field contains nested selections.
Clear buttons let users empty an entire input field.
They are right justified in the field.
In forms with many or crowded fields, text fields may be made shorter.
Input text: 13sp
Reduce space between the label and input text
Reduce space between the input line and help text by 50%
Text fields have two major states: enabled or disabled.
In the enabled state, these user interactions are available:
Text field input can be either:
Empty or filled
Valid or invalid
Text field states
Enabled text fields are empty by default.
Labels have 8dp of padding above the input line
Label text is the same size as input text
The line should have a 3:1 contrast ratio to improve identifiability, the same AA accessibility standard as large text.
Disabled text fields are uneditable. They have a dotted input line and less opacity so that they appear less tappable.
Hover states give the input line more opacity, helping make text fields more noticeable on desktop.
Upon press, the text field label shrinks and floats above the field, revealing the cursor and any placeholder text.
To signal that the field is active, the primary color of the UI is applied to the input line, label text, and cursor.
As the user types into the text field, input text replaces any placeholder text. Autocompleted text is displayed to the right of the cursor, using the same font size and color as placeholder text.
Text field input
Idle & filled
When the user shifts focus to another element, entered input text remains visible.
Text field content
If a text field is invalid, an error message is displayed when the user shifts focus to another element. To indicate an error, the input line and label use a color with a warmer hue, such as red or orange.
Display an error message below the text field, replacing any helper text
Briefly state the reason for the error and how to fix it
Place the word “Error” (or an error icon) before the error message
Remove the error once fixed by the user
There are several types of text fields:
When the text entered is longer than the input line, it automatically scrolls left as the cursor reaches the right edge of the field.
Multi-line text fields wrap text onto a new line by expanding the bottom of the field, shifting screen elements downward.
Multi-line text fields allow users to see everything they input at once.
Text areas are taller than text fields and wrap overflow text onto a new line. They scroll vertically when the cursor reaches the bottom of the field.
Text areas should have a visible border, using the same color and thickness as the input line.
Text fields can be formatted to indicate the types of data a field accepts, using placeholder text, preset layout, and character limits. Text formatting should be displayed only when the field is pressed, focused, or filled.
Characters can be formatted using:
Prefixes and suffixes
Input text can be grouped in different ways, with special characters added in appropriate places, such as hyphens added to a phone number. Once the first special character is reached, the cursor automatically jumps to the next group.
Prefixes & suffixes
Prefixes and suffixes can be used to clarify units or to add input in advance. Prefixes are left justified in the text field; suffixes are right justified. Text fields can have both prefixes and suffixes.
Password input is disguised by default. Midline ellipses are displayed to represent each character of a password entered (such as •••••••).
When the visibility icon is displayed with a text field, it indicates whether or not that field’s input is visible. A text field’s visibility may be toggled on or off using the icon.
Menus and pickers
Other components such as dropdown menus and pickers can be nested in text fields to make input easier.
Draw additional focus to text fields using these style variations:
Labels as headings
Labels as headings
When a text field is the primary action on a screen, its label can be removed or become a heading.
Placeholder text appears in the idle state and is replaced with input text as the user enters text.
When a text field is used for a single action such as search, the text field may be elevated, with associated icons placed within it. An input line is not required.
On desktop, a raised search button should appear to the right of the search field.
Full-width text fields are useful for in-depth tasks or entering complex information.
Text field boxes
Text field boxes increase text field identifiability and scannability by using a transparent rectangular fill to enclose the label and input text.
A text field box uses a rectangular fill as a primary affordance, masking the ends of the input line. A ripple motion occurs in the hover and press states.
Text field boxes make dense layouts easier to read.