Components Text fields

Text fields

Text fields allow the user to input text. They can be single-line, with or without scrolling, or multi-line, and can have an icon. Touching a text field places the cursor and automatically displays the keyboard. In addition to typing, text fields allow for a variety of other tasks, such as text selection (cut, copy, paste) and data lookup via auto-completion. See Patterns > Selection for text selection design.

The type of text field determines what kind of characters are allowed inside the field and may prompt the virtual keyboard to optimize its layout for frequently used characters. Common types for which you should optimize include numbers, text, email address, phone number, person’s name, username, URL, street address, credit card number, PIN, and search query.

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

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

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

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

Floating labels

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

Height: 72dp
Padding above label text: 16dp
Padding between label and input text: 8dp
Padding below input text: 16dp
Padding below text divider: 8dp

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

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

Light theme for multi-line text field for these states: 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: 16dp above the label text
16dp below the text

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
Top and bottom padding for text: 20dp

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

Single line focus, single line focus with exceeding maximum characters, multi-line focus and multi-line focus with exceeding maximum characters

Full-width text field with character counter

Full-width text field without 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.

Auto-complete text field

Auto-complete text field in dropdown

Full-width auto-complete

Full-text field and full-width suggestions

Inset auto-complete

Inset auto-complete

Inset text field and focus card suggestions

Full-width inline auto-complete

Full-width inline auto-complete

Full-width inline auto-complete

Normal with hint text and 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.

Full-width text field in app bar

Full-width text field in app bar with inset text field and focus card suggestions.