Components Text fields

Text fields

Text fields allow users to input text, select text, and lookup data via auto-completion.

Text fields usually appear in forms.

Users may enter text, numbers, or mixed-format types of input.

Text field types

Single-line
Multi-line
Full-width

Available functionality

Character counter
Auto-complete
Search filter
Required fields
Password input redaction

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

Touching a text field makes the two actions occur:

  • Places the cursor there
  • Displays the keyboard

Text field anatomy

  • Labels describe the type of input requested in each field
  • Hint text is placeholder text that suggests the type of information requested, sometimes in the form of an example
  • Helper text appears below input fields to provide additional context

Input types

The type of text field determines what kind of characters are allowed inside the field. The virtual keyboard layout may be optimized for frequently used characters.

Common input types for which you should optimize include:

  • Number: Phone number, credit card number, PIN
  • Text: Proper name, username, URL
  • Mixed format: Email address, street address, search query

Auto-capitalization

The first letter in each text field should be capitalized where appropriate and if required by the locale, as well as the first letter of each sentence. For example, this is especially relevant for input fields that:

  • Ask to name something, such as a Bluetooth device, user, fingerprint, or alarm
  • Contain sentence-like messages, such as text messages

1. Label
2. Hint text
3. Helper text

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

When the user engages with the text input field, the floating inline labels move to float above the field.

Floating inline labels

Floating inline labels

Label color

The label’s color should reflect your app’s color palette, while also meeting appropriate contrast ratios.

Light theme

Floating inline labels light theme for: normal with hint text/label, focus, normal with input text, and label and disabled states

Dark theme

Floating inline labels dark theme for: normal with hint text/label, focus, normal with input text, and label and disabled states

Specs

Floating label

  • Roboto Regular 12sp

Hint and input text

  • Regular labels: Roboto Regular 16sp
  • Dense labels: Roboto Regular 13sp

Before input is entered, floating label text is 16sp (or 13sp for dense labels). As text is entered, the label moves to a new location above the input field and the label text becomes 12sp (for both regular and dense labels).

Floating labels
Tile height: 72dp

Label text
Font size: 12sp
Padding above: 16dp
Padding below: 8dp

Hint and input text
Font size: 16sp
Padding below: 8dp

Input line
Padding below: 8dp


Dense floating labels
Tile height: 60dp

Label text
Font size: 12sp
Padding above: 12dp
Padding below: 4dp

Hint and input text
Font size: 13sp
Padding below: 12dp

Input line
Padding below: 4dp

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

Density

When the mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts.

Color

Text fields should reflect your product’s color palette. The following color applications are recommended:

  • Text fields and text cursor: Color these with your palette’s accent color, or a contrasting color
  • Error states: Use a contrasting color for error states, such as a warmer hue (for example, red or orange)

Light theme - Dark text (#000000)

Opacity

Normal

38%

Hover

54%

Press

54%

Focus

87%

Normal with input text

87%

Error

100%

Disabled

38%

Dark theme - Light text (#ffffff)

Opacity

Normal

50%

Hover

70%

Press

70%

Focus

100%

Normal with input text

100%

Error

100%

Disabled

50%

Single-line text field Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Single-line fields

Single-line fields automatically scroll their content to the left as the text input cursor reaches the right edge of the input field.

Single-line text field

Single-line text field

The color you choose should reflect your app’s color palette.

Light theme

  • Hint and input font: Roboto Regular 16sp
  • Tile height: 48dp
  • Text top and bottom padding: 16dp
  • Text field divider padding: 8dp
  • Hint text for pressed state: 54% black

Single-line text field light theme

Dark theme

  • Hint text for pressed state: 70% white

Single-line text field dark theme

Single-line text field

Height: 48dp
Padding above and below text: 16dp
Padding below divider: 8dp

Dense single-line text field

Hint and input text: 13sp
Height: 40dp
Padding above and below text: 12dp
Padding below divider: 4dp

Light theme with icon

  • Hint and input font: Roboto Regular 16sp
  • Tile height: 48dp
  • Text top and bottom padding: 16dp
  • Text field divider padding: 8dp

Light theme with: normal with hint text, focus, and normal with input text

Dark theme with icon

Dark theme with: normal with hint text, focus, and normal with input text

Single-line text field with icon

Height: 48dp
Padding above and below text: 16dp
Padding below divider: 8dp
Icon: 24dp

Dense single-line text field with icon

Hint and input text: 13sp
Height: 40dp
Padding above and below text: 12dp
Padding below divider: 4dp
Icon: 20dp

Multi-line text field Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Multi-line text fields automatically break to a new line for overflow text and scroll vertically when the cursor reaches the lower edge.

Multi-line text field

The color you choose should reflect your UI’s color scheme.

Light theme

  • Hint and input font: Roboto Regular 16sp
  • Label font: Roboto Regular 12sp
  • Text top and bottom padding: 16dp
  • Text field divider padding: 8dp

Multi-line text field light theme for: normal with hint text, focused, and normal with multi-line input text

Dark theme

Dark theme for multi-line text field for these states: normal with hint text, focus, and normal with multi-line input text

Dark theme specs:

Padding above and below label: 16dp

Dense dark theme specs:

Label and input text: 13sp
Label text top and bottom padding: 12dp

Full-width text field Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Full-width text fields are useful for more in-depth tasks.

Full-width text field

Full-width text field

Single and multi-line fields

  • Hint and input font: Roboto Regular 16sp
  • Top and bottom padding for text: 20dp

Single and multi-line fields for these states: normal, focused, and normal with multi-line input text

Specs for full-width single line text field:

Height: 56dp
Text top and bottom padding: 20dp

Specs for dense full-width single line text field:

Hint and input text: 13sp
Height: 48dp
Text top and bottom padding: 16dp

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

Use a character counter in fields where a character restriction is in place.

Single line with character counter

Counter text: Roboto Regular 12sp

Single line with character counter with a green line showing the user has not exceeded the character restriction

Single line with character counter with a red line showing that the character restriction has been exceeded

Multi-line with character counter

Counter text: Roboto Regular 12sp

Multi-line with character counter with a green line showing the user has not exceeded the character restriction

Multi-line with character counter with a red line showing that the character restriction has been exceeded

Full-width text field with character counter

Full-width text field with character counter

Single-line focus and multi-line focus text fields

Auto-complete text field Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Use auto-complete text fields to present real-time suggestions or completions in dropdowns, so users can enter information more accurately and efficiently.

Autocomplete is especially valuable for users with limited text literacy or who have difficulty with spelling, especially if they are using a non-native language. (Some users have to navigate the Internet in English because there are no localized pages for their native languages.)

Auto-complete text field

Auto-complete text field in dropdown

Inset auto-complete

Inset auto-complete

Inset auto-complete

Full-width inline auto-complete

Normal with hint text

Focus with suggestions

In-line auto-complete

In-line auto-complete

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

The app bar can act as a text input field. As the user types, the content underneath is filtered and sorted.

The app bar acts as a text input field..

The app bar acts as a text input field and the content underneath is filtered and sorted.

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

To indicate that a field is required, display an asterisk (*) next to the field. At the bottom of the form, include a note explaining that an asterisk indicates a required field.

Helper text

Helper text should appear below the text field and either be persistently visible, or only visible on focus.

Required fields are marked with an asterisk. Helper text can either be visible on focus, or visible persistently.

Hint text

Hint text should display the type of information requested in a text field. It may be displayed in the form of an example, such as a placeholder phone number or URL.

Hint text gives examples of text and numbers. The hint text field may also have a dropdown menu, where the user either types in their choice or selects one from the dropdown menu.

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

Password input is disguised by default. Midline ellipses are displayed to represent each character of a password entered (such as •••••••).

Enabling and disabling visibility

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:

Visibility enabled

The visibility icon is displayed, with the password visible

Visibility disabled

The invisibility icon is displayed, with the password represented by midline ellipses

The visibility icon appears on the text field, off to the side.

The following transparency values are used for password text:

Normal with hint text

Visible

Nonvisible

Error

Icon: 38%

Hint text: 38%

Helper text: 54%

Icon: 54%

Floating hint text: 100%

Input text: 87%

Helper text: 54%

Icon: 54%

Floating hint text: 100%

Input ellipses: 87%

Helper text: 54%

Icon: 100%

Floating hint text: 100%

Input text: N/A

Helper text: 100%