Components – Text fields

Google ©

Privacy & Terms

Text fields

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

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

Touching a text field places the cursor and displays the keyboard.

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

Density

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

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

Light theme

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

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 for: normal with hint text/label, focus, normal with input text, and label and disabled states

Floating labels

Label height: 72dp
Padding above label text: 16dp
Padding between label and input text: 8dp
Padding below input text (including divider): 16dp
Padding below text divider: 8dp

Dense floating labels

Label and input text: 13sp
Label height: 60dp
Label text top padding: 12dp
Padding between label and input text: 4dp
Input text bottom padding (including divider): 12dp
Text divider bottom padding: 4dp

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

Light theme

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

Single-line text field light theme

Dark theme

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

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

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, or hint text, should appear below the text field and either be persistently visible, or only visible on focus.