Skip to content

Text fields ​

Text fields let users enter text into a UI. They typically appear in forms and dialogs.

Overview · Specs · Guidelines · Accessibility

Text fields

  • Make sure text fields look interactive
  • Two variants: filled and outlined
  • The text field’s state (blank, with input, error, etc) should be visible at a glance
  • Keep labels and error messages brief and easy to act on
  • Text fields commonly appear in forms and dialogs

2 variants of text fields, filled and outlined.

  1. Filled text field
  2. Outlined text field

Availability & resources ​

TypeResourceStatus
DesignDesign Kit (Figma)Available
ImplementationFlutterAvailable
ImplementationJetpack ComposeAvailable
ImplementationAndroid Views (MDC-Android)Available
ImplementationWebAvailable

Differences from M2 ​

A filled and outlined text field with M3 color mappings.

Text fields have new color mappings

Unofficial offline mirror. Content © Google, licensed under CC BY 4.0.