Text fields let users enter and edit text. They typically appear in forms and dialogs. Material Design text fields include several variants with different visual styles and interaction patterns.
Filled text fields have a solid fill color and are visually prominent.
| Property | Specification |
|---|---|
| Container Height | 56px |
| Container Color | #f5f5f5 (Light theme) |
| Active Indicator Height | 2px |
| Corner Radius | 4px (top corners only) |
| Label Font Size | 16px (resting), 12px (floating) |
Outlined text fields have a stroke around the entire container.
| Property | Specification |
|---|---|
| Container Height | 56px |
| Border Width | 1px (resting), 2px (focused) |
| Border Color | rgba(0, 0, 0, 0.38) (resting), #6200ee (focused) |
| Corner Radius | 4px (all corners) |
| Label Font Size | 16px (resting), 12px (floating) |
| Element | Font Size | Font Weight | Color |
|---|---|---|---|
| Input Text | 16px | 400 (Regular) | rgba(0, 0, 0, 0.87) |
| Label (Resting) | 16px | 400 (Regular) | rgba(0, 0, 0, 0.6) |
| Label (Floating) | 12px | 400 (Regular) | #6200ee |
| Helper Text | 12px | 400 (Regular) | rgba(0, 0, 0, 0.6) |
| Error Text | 12px | 400 (Regular) | #b00020 |