Usage
A text field is a single-line outlined input where someone types a value the app then keeps. Use it when the value has to be typed rather than picked from a set, and when the field belongs to a form or a naming step. One field holds one value.
- Give every field a label that names the value, and keep the label visible once typing starts.
- Put the rule in the supporting text before someone hits it, such as a minimum length or an accepted format.
- Use the reveal icon on a password field and the clear icon on a field people retype often.
- Use the placeholder as the label. It goes away the moment someone types, and the field is then unlabelled.
- Use for a value with a fixed set of answers (use a dropdown, a radio button, or a checkbox).
Design properties
| Property | Values | Default |
|---|---|---|
| State Variant | Enabled | Focused | Hovered | Error | Disabled | Enabled |
| Show supporting text Boolean | true | false | true |
| Leading icon Variant | False | True | False |
| Trailing icon Variant | False | True | False |
| Text configuration Variant | Input text | Label text | Placeholder text | Input text |
Types
Material has two text field types, filled and outlined. Firefox for Android uses the outlined type everywhere, and the two are never combined in one app.
Outlined
Use for all text fields, where a label and the value someone types are all it needs.
Options
A field can carry any combination of these, or none at all. They are independent of each other, so read them as options to add rather than a list to pick one from.
Leading icon
Use when an icon names the kind of value faster than the label does, such as a search or a location field. The leading icon is not a control.
Trailing icon
Use for an action on the field itself, such as clearing the value or revealing a password. It is the only part of the field someone can touch separately.
Supporting text
Use when a format, a limit, or an error message has to sit under the field. Turn it on for any field that can fail validation.
Behavior and interaction
Behavior
- Touching the field opens the keyboard, moves it to Focused, and floats the label up into the notch in the outline.
- Validate on submit rather than on every keystroke, so a half-typed value does not turn the field red while someone is still typing it.
- The error message takes the place of the supporting text rather than sitting under it. Write both so either one reads on its own.
- A clear or reveal button is not shown while an error is up, so nothing inside the field can empty it. Give people a way back to a valid value that does not depend on the trailing icon.
Positioning
- Stack fields in the order they will be filled, with the submitting button after the last one.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Aug 27, 2026 |
1.0.0 |
Initial draft of guidance |