Components Text fields

Text fields

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.

Usage

Text fields validate input, help users fix errors, autocomplete words, and provide suggestions.

Field types

Single-line
Multi-line
Text area

Input types

Formatted inputs
Nested menus & pickers

alt-text

Principles Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Text fields should have the following characteristics:

Identifiable

Using a tappable touch target, text fields should indicate that users can enter information.

Findable

It should be easy to find a text field among other elements.

Legible

Text fields should indicate their state – whether enabled or disabled, empty or filled, valid or invalid – with clear label, input, and assistive text.

Layout Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Text fields contain the following elements:

Label

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.

alt-text

Resting label text
Top padding: 16dp
Bottom padding: 8dp

alt-text

Floating label text
Top padding above label: 16dp
Bottom padding below label: 8dp
Bottom padding below input: 8dp

Input line

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.

alt-text

Labels rest above the line when the text field is empty.

alt-text

Labels float upward when the text field is in focus or filled.

Cursor

The cursor indicates the user’s current input position.

alt-text

The cursor is inset with the label until the user enters input.

Input text

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
alt-text

Input text in an active field

alt-text

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:

  • 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.

alt-text

Reduce the opacity of suggested text, while keeping typed text at full opacity.

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.

alt-text

Placeholder text can be displayed in an empty text field until input is entered.

alt-text

Placeholder text
Padding above label: 16dp
Padding above placeholder text: 8dp
Padding below placeholder text: 8dp

Helper text

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:

  • Left justified
  • On a single line if possible, or with text wrapping (if multiple lines)
alt-text

Helper text can provide additional context below the text field.

alt-text

Helper text
Padding above helper text: 8dp

alt-text

Helper text can support placeholder text in guiding the user.

Error message

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.

alt-text

An error message helps guide the user to fix invalid input.

alt-text

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.

alt-text

The term “Error:” (including the colon) precedes the error message

alt-text

Error icon inline with the error message

Required field

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.

alt-text

Required asterisk indicator in an empty text field

alt-text

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.

alt-text

Optional indicator text in an empty text field

alt-text

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.

alt-text

Name and zip code are the only required fields in the form.

alt-text

Description is the only optional field in the form.

Character or word counter

Use character or word counters where there is a character or word limit.

Specs:

  • Right justified
  • Displayed as a ratio of characters used and the character limit (formatted as: characters used / character limit)
alt-text

The character counter shows that 5 out of 10 possible characters have been entered.

alt-text

Character counter
Padding below the text input line: 8dp

Icon signifier

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.

alt-text

A calendar icon indicates that the text field is for entering a date.

alt-text

Icon signifier
Width: 24dp
Padding between icon signifier and label: 16dp

Voice input icon

A microphone icon signifies that users can input characters using voice.

Voice input icons are right justified, and always enabled.

alt-text

Clicking on the icon allows users to input characters using voice.

alt-text

Voice input icon
Width: 24dp
Padding below icon: 8dp

Dropdown icon

A dropdown arrow indicates that a text field contains nested selections.

alt-text

Clicking on the dropdown arrow expands the nested selection component.

alt-text

Dropdown arrow container
Width: 24dp
Height: 24dp
Padding below icon: 8dp

Clear button

Clear buttons let users empty an entire input field.

They are right justified in the field.

alt-text

The clear icon is enabled when there are characters entered in the field.

alt-text

Clear icon
Width: 24dp
Height: 24dp
Padding below icon: 8dp

In forms with many or crowded fields, text fields may be made shorter.

Specs:

  • Input text: 13sp
  • Reduce space between the label and input text
  • Reduce space between the input line and help text by 50%
alt-text

Normal spacing
Padding above label: 16dp
Padding below label: 8dp
Padding above text input line: 8dp
Padding below text input line: 8dp

alt-text

Dense spacing
Padding above label: 8dp
Padding below label: 4dp
Padding above text input line: 8dp
Padding below text input line: 4dp

States Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Text fields have two major states: enabled or disabled.

In the enabled state, these user interactions are available:

  • Idle
  • Hover
  • Pressed
  • Focused

Text field input can be either:

  • Empty or filled
  • Valid or invalid
alt-text

Text field states in light and dark themes

Text field states

Enabled

Enabled text fields are empty by default.

Specs

  • Labels have 8dp of padding above the input line
  • Label text is the same size as input text

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

  • Thickness: 1dp
  • Color: 42% black (3:1 contrast ratio)

Label text

  • Type: Roboto 16sp
  • Color: 54% black (4.5:1 contrast ratio)
  • Spacing: 16dp top padding, 8dp bottom padding, inset with bottom line

Helper text (optional)

  • Type: Roboto 12sp
  • Color: 54% black (4.5:1 contrast ratio)
  • Spacing: 16dp left padding, 8dp top padding

Dark theme

Bottom line

  • Thickness: 1dp
  • Color: 70% white (7:1 contrast ratio)

Label text

  • Type: Roboto 16sp
  • Color: 70% white (7:1 contrast ratio)
  • Spacing: 16dp top padding, 8dp bottom padding, inset with bottom line

Helper text (optional)

  • Type: Roboto 12sp
  • Color: 70% white (7:1 contrast ratio)
  • Spacing: 16dp left padding, 8dp top padding

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

  • Thickness: 1dp
  • Color: 42% black
  • Dotted

Label text

  • Type: Roboto 12sp
  • Color: 42% black (3:1 contrast ratio)
  • Spacing: 8dp bottom padding, inset with bottom line

Input text

  • Type: Roboto 16sp
  • Color: 42% black (3:1 contrast ratio)
  • Spacing: 8dp top padding, inset with bottom line

Dark theme

Bottom line

  • Thickness: 1dp
  • Color: 70% white
  • Dotted

Label text

  • Type: Roboto 12sp
  • Color: 50% white (4.5:1 contrast ratio)
  • Spacing: 8dp bottom padding, inset with bottom line

Input text

  • Type: Roboto 16sp
  • Color: 50% white (4.5:1 contrast ratio)
  • Spacing: 8dp top padding, inset with bottom line

User interactions

Hover

Hover states give the input line more opacity, helping make text fields more noticeable on desktop.

Light theme

Bottom line

  • Thickness: 2dp
  • Color: 87% black (15:1 contrast ratio)

Label text

  • Type: Roboto 16sp
  • Color: 54% black (4.5:1 contrast ratio)
  • Spacing: 8dp bottom padding, inset with bottom line

Helper text (optional)

  • Type: Roboto 12sp
  • Color: 54% black (4.5:1 contrast ratio)
  • Spacing: 8dp top padding, inset with bottom line

Dark theme

Bottom line

  • Thickness: 2dp
  • Color: 100% white (13:1 contrast ratio)

Label text

  • Type: Roboto 16sp
  • Color: 70% white (7:1 contrast ratio)
  • Spacing: 8dp bottom padding, inset with bottom line

Helper text (optional)

  • Type: Roboto 12sp
  • Color: 70% white (7:1 contrast ratio)
  • Spacing: 8dp top padding, inset with bottom line

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

  • Thickness: 2dp
  • Color: 100% primary color (Dark A700)
  • Motion: Ripple & wash

Label text

  • Type: Roboto 12sp
  • Color: 87% primary color (Dark A700)
  • Spacing: 8dp bottom padding, inset with bottom line

Placeholder text (optional)

  • Type: Roboto 16sp
  • Color: 42% black (3:1 contrast ratio)
  • Spacing: 8dp bottom padding, inset with bottom line

Helper text (optional)

  • Type: Roboto 12sp
  • Color: 54% black (4.5:1 contrast ratio)
  • Spacing: 8dp top padding, inset with bottom line

Dark theme

Bottom line

  • Thickness: 2dp
  • Color: 100% primary color (Light A200)
  • Motion: Ripple & wash

Label text

  • Type: Roboto 12sp
  • Color: 100% primary color (Light A200)
  • Spacing: 8dp bottom padding, inset with bottom line

Placeholder text (optional)

  • Type: Roboto 16sp
  • Color: 50% white (4.5:1 contrast ratio)
  • Spacing: 8dp bottom padding, inset with bottom line

Helper text (optional)

  • Type: Roboto 12sp
  • Color: 70% white (7:1 contrast ratio)
  • Spacing: 8dp top padding, inset with bottom line

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

  • Thickness: 2dp
  • Color: 100% primary color (Dark A700)

Label text

  • Type: Roboto 12sp
  • Color: 87% primary color (Dark A700)
  • Spacing: 16dp top padding and 8dp bottom padding

Input text

  • Type: Roboto 16sp
  • Color: 87% black (15:1 contrast ratio)
  • Spacing: 8dp bottom padding, inset with bottom line

Helper text (optional)

  • Type: Roboto 12sp
  • Color: 54% black (4.5:1 contrast ratio)
  • Spacing: 8dp top padding, inset with bottom line

Dark theme

Bottom line

  • Thickness: 2dp
  • Color: 100% primary color (Light A200)

Label text

  • Type: Roboto 12sp
  • Color: 100% primary color (Light A200)
  • Spacing: 16dp top padding and 8dp bottom padding

Input text

  • Type: Roboto 16sp
  • Color: 100% white (13:1 contrast ratio)
  • Spacing: 8dp bottom padding, inset with bottom line

Helper text (optional)

  • Type: Roboto 12sp
  • Color: 70% white (7:1 contrast ratio)
  • Spacing: 8dp top padding, inset with bottom line

Text field input

Idle & filled

When the user shifts focus to another element, entered input text remains visible.

Light theme

Bottom line

  • Thickness: 1dp
  • Color: 42% black (3:1 contrast ratio)

Label text

  • Type: Roboto 12sp
  • Color: 54% black (4.5:1 contrast ratio)
  • Spacing: 16dp top padding and 8dp bottom padding

Input text

  • Type: Roboto 16sp
  • Color: 87% black (15:1 contrast ratio)
  • Spacing: 8dp bottom padding, inset with bottom line

Helper text (optional)

  • Type: Roboto 12sp
  • Color: 54% black (4.5:1 contrast ratio)
  • Spacing: 8dp top padding, inset with bottom line

Dark theme

Bottom line

  • Thickness: 1dp
  • Color: 70% white (7:1 contrast ratio)

Label text

  • Type: Roboto 12sp
  • Color: 70% white (7:1 contrast ratio)
  • Spacing: 16dp top padding and 8dp bottom padding

Input text

  • Type: Roboto 16sp
  • Color: 100% white (13:1 contrast ratio)
  • Spacing: 8dp bottom padding, inset with bottom line

Helper text (optional)

  • Type: Roboto 12sp
  • Color: 70% white (7:1 contrast ratio)
  • Spacing: 8dp top padding, inset with bottom line

Text field content

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

  • 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

Light theme

Bottom line

  • Thickness: 2dp
  • Color: 100% red (A400)

Label text

  • Type: Roboto 12sp
  • Color: 100% red (A400)
  • Spacing: 16dp top padding and 8dp bottom padding, inset with bottom line

Input text

  • Type: Roboto 16sp
  • Color: 87% black (15:1 contrast ratio)
  • Spacing: 16dp left padding, 8dp bottom padding

Error text

  • Type: Roboto 12sp
  • Color: 87% red (A400)
  • Spacing: 8dp top padding, inset with bottom line

Dark theme

Bottom line

  • Thickness: 2dp
  • Color: 100% red (A400)

Label text

  • Type: Roboto 12sp
  • Color: 100% red (A400)
  • Spacing: 16dp top padding and 8dp bottom padding, inset with bottom line

Input text

  • Type: Roboto 16sp
  • Color: 100% white (13:1 contrast ratio)
  • Spacing: 16dp left padding, 8dp bottom padding

Error text

  • Type: Roboto 12sp
  • Color: 100% red (A400)
  • Spacing: 8dp top padding, inset with bottom line

Field types Expand and collapse content An arrow that points down when collapsed and points up when expanded.

There are several types of text fields:

  • Single-line
  • Multi-line
  • Text area

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.

alt-text

Single-line text fields

alt-text

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.

alt-text

Multi-line text field

alt-text

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.

alt-text

The message box is the text area

alt-text

The message box is the text area

Text areas should have a visible border, using the same color and thickness as the input line.

alt-text

Light and dark states for text areas

Input types Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Formatted inputs

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
  • Prefixes and suffixes
  • Password redaction

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.

alt-text

Input text grouped and formatted for a phone number

alt-text

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.

alt-text

Prefix for dollar currency

alt-text

Suffix for weight

alt-text

Suffix for email domain

alt-text

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.

alt-text

The visibility icon is displayed with password characters visible when visibility is enabled.

alt-text

The invisibility icon is displayed with password characters hidden when visibility is disabled.

Other inputs

Menus and pickers

Other components such as dropdown menus and pickers can be nested in text fields to make input easier.

alt-text

Text field dropdown menu for selecting a US state

alt-text

Text field picker for selecting a date

Field variations Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Draw additional focus to text fields using these style variations:

  • Labels as headings
  • Solo fields
  • Full-width fields

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.

alt-text

Label text can be removed from the field and displayed as a headline in onboarding or query flows.

alt-text

Label text can be removed from the field and displayed as a headline in dialogs.

Solo fields

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.

alt-text

Search action as a raised text field on desktop

alt-text

Search action as a raised text field on mobile

alt-text

The app bar acts as a text input field

alt-text

The app bar has a nested text input field

Full-width field

Full-width text fields are useful for in-depth tasks or entering complex information.

alt-text

Full-width text field

alt-text

Full-width text field with both single-line and multi-line text behavior

alt-text


Full-width field with normal spacing
Height: 56dp
Top padding: 20dp
Bottom padding: 20dp

alt-text


Full-width field with dense spacing
Height: 48dp
Top padding: 16dp
Bottom padding: 16dp

Text field boxes Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

States

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

  • Height: 56dp
  • Corner radius: 4dp
  • Color (light theme): 6% black
  • Color (dark theme): 10% white

Bottom line

  • Thickness: 2dp
  • Masked by rounded corners of rectangle

Idle & empty

  • Left padding: 16dp
  • Right padding: 16dp
  • Padding above label: 8dp

Hover

  • Left padding: 16dp
  • Padding above label: 20dp
  • Padding below label: 20dp

Press

  • Padding above label: 8dp
  • Padding below label: 8dp
  • Padding below placeholder: 8dp

Spacing for focus, idle & filled, error, and disabled states are the same as the press state.

Dense layouts

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.

Single-line text field box

Text scrolling behavior in a single-line field

Single-line text field with label as heading

Multi-line text field box

Text wrapping and scrolling behavior in a multi-line field

Multi-line field in pressed state

Idle and filled multi-line field

Text box area

Text wrapping and scrolling behavior in the text box area

Empty and idle text area

Text area in pressed state

Menus & pickers

Dropdown list in a rectangular text field

Icon and date picker in a rectangular text field