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.
Resting label text
Top padding: 16dp
Bottom padding: 8dp
Floating label text
Top padding above label: 16dp
Bottom padding below label: 8dp
Bottom padding below input: 8dp
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.
Labels rest above the line when the text field is empty.
Labels float upward when the text field is in focus or filled.
The cursor indicates the user’s current input position.
The cursor is inset with the label until the user enters input.
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:
Input text in an active field
Input text
Top padding: 8dp
Bottom padding: 8dp
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:
Pressing the return button accepts the current autocomplete suggestion.
Reduce the opacity of suggested text, while keeping typed text at full opacity.
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.
Placeholder text can be displayed in an empty text field until input is entered.
Placeholder text
Padding above label: 16dp
Padding above placeholder text: 8dp
Padding below placeholder text: 8dp
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.
Specs:
Helper text can provide additional context below the text field.
Helper text
Padding above helper text: 8dp
Helper text can support placeholder text in guiding the user.
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 helps guide the user to fix invalid input.
Error message
Padding above the error message: 8dp
An error message is preceded by the word “Error” (or an error icon) to make the error state more distinct to colorblind users.
The term “Error:” (including the colon) precedes the error message
Error icon inline with the error message
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.
Required asterisk indicator in an empty text field
Required asterisk indicator in a filled text field.
To indicate that a field is optional, display the word “optional” in parentheses next to the field label.
Optional indicator text in an empty text field
Optional indicator text in a filled text field
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.
Use character or word counters where there is a character or word limit.
Specs:
The character counter shows that 5 out of 10 possible characters have been entered.
Character counter
Padding below the text input line: 8dp
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.
A calendar icon indicates that the text field is for entering a date.
Icon signifier
Width: 24dp
Padding between icon signifier and label: 16dp
A microphone icon signifies that users can input characters using voice.
Voice input icons are right justified, and always enabled.
Clicking on the icon allows users to input characters using voice.
Voice input icon
Width: 24dp
Padding below icon: 8dp
A dropdown arrow indicates that a text field contains nested selections.
Clicking on the dropdown arrow expands the nested selection component.
Dropdown arrow container
Width: 24dp
Height: 24dp
Padding below icon: 8dp
Clear buttons let users empty an entire input field.
They are right justified in the field.
The clear icon is enabled when there are characters entered in the field.
Clear icon
Width: 24dp
Height: 24dp
Padding below icon: 8dp
In forms with many or crowded fields, text fields may be made shorter.
Specs:
Normal spacing
Padding above label: 16dp
Padding below label: 8dp
Padding above text input line: 8dp
Padding below text input line: 8dp
Dense spacing
Padding above label: 8dp
Padding below label: 4dp
Padding above text input line: 8dp
Padding below text input line: 4dp
Text fields have two major states: enabled or disabled.
In the enabled state, these user interactions are available:
Text field input can be either:
Text field states in light and dark themes
Enabled
Enabled text fields are empty by default.
Specs
Accessibility
The line should have a 3:1 contrast ratio to improve identifiability, the same AA accessibility standard as large text.
Light theme
Bottom line
Label text
Helper text (optional)
Dark theme
Bottom line
Label text
Helper text (optional)
Disabled
Disabled text fields are uneditable. They have a dotted input line and less opacity so that they appear less tappable.
Light theme
Bottom line
Label text
Input text
Dark theme
Bottom line
Label text
Input text
Hover
Hover states give the input line more opacity, helping make text fields more noticeable on desktop.
Light theme
Bottom line
Label text
Helper text (optional)
Dark theme
Bottom line
Label text
Helper text (optional)
Press
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.
Light theme
Bottom line
Label text
Placeholder text (optional)
Helper text (optional)
Dark theme
Bottom line
Label text
Placeholder text (optional)
Helper text (optional)
Focus
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.
Light theme
Bottom line
Label text
Input text
Helper text (optional)
Dark theme
Bottom line
Label text
Input text
Helper text (optional)
Idle & filled
When the user shifts focus to another element, entered input text remains visible.
Light theme
Bottom line
Label text
Input text
Helper text (optional)
Dark theme
Bottom line
Label text
Input text
Helper text (optional)
Error
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.
Specs
Light theme
Bottom line
Label text
Input text
Error text
Dark theme
Bottom line
Label text
Input text
Error text
There are several types of text fields:
Single-line 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.
Input text scrolls to the left as the cursor reaches the right end of the single-line text field.
Single-line text fields
Single-line text fields
Multi-line fields
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.
Input text wraps to a new line and makes the field taller as the cursor reaches the right end of the field.
Multi-line text field
Multi-line text field
Text area
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.
Input text scrolls up as the cursor reaches the bottom right of the text area.
The message box is the text area
The message box is the text area
Text areas should have a visible border, using the same color and thickness as the input line.
Light and dark states for text areas
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:
Grouped characters
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.
Input text grouped and formatted for a phone number
Input text grouped and formatted for a credit card number
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.
Prefix for dollar currency
Suffix for weight
Suffix for email domain
Suffix for time zone
Password redaction
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.
The visibility icon is displayed with password characters visible when visibility is enabled.
The invisibility icon is displayed with password characters hidden when visibility is disabled.
Draw additional focus to text fields using these style variations:
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.
Label text can be removed from the field and displayed as a headline in onboarding or query flows.
Label text can be removed from the field and displayed as a headline in dialogs.
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.
Search action as a raised text field on desktop
Search action as a raised text field on mobile
The app bar acts as a text input field
The app bar has a nested text input field
Full-width text fields are useful for in-depth tasks or entering complex information.
Full-width text field
Full-width text field with both single-line and multi-line text behavior
Full-width field with normal spacing
Height: 56dp
Top padding: 20dp
Bottom padding: 20dp
Full-width field with dense spacing
Height: 48dp
Top padding: 16dp
Bottom padding: 16dp
Text field boxes increase text field identifiability and scannability by using a transparent rectangular fill to enclose the label and input text.
Text field boxes use color to increase the discoverability of the field, while preserving the input line.
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 states with a rectangular affordance
Rectangular fill
Bottom line
Idle & empty
Hover
Press
Spacing for focus, idle & filled, error, and disabled states are the same as the press state.
Text field boxes make dense layouts easier to read.
Normal spacing
Height: 56dp
Padding above label: 8dp
Padding below label: 8dp
Padding below text field: 8dp
Padding above helper text: 8dp
Dense spacing
Height: 44dp
Padding above label: 8dp
Padding below label: 4dp
Padding below text field: 8dp
Padding above helper text: 4dp.
Text scrolling behavior in a single-line field
Single-line text field with label as heading
Text wrapping and scrolling behavior in a multi-line field
Multi-line field in pressed state
Idle and filled multi-line field
Text wrapping and scrolling behavior in the text box area
Empty and idle text area
Text area in pressed state
Dropdown list in a rectangular text field
Icon and date picker in a rectangular text field
