Text Fields
Text fields allow users to enter and edit text. Material Design 3 provides two main variants: filled and outlined text fields, each with their own visual hierarchy and use cases.
Outlined Text Field
Outlined text fields have a stroked border and are ideal for forms where the field needs to stand out. The label animates to the top border when the field is focused or has content.
Supporting text
Filled Text Field
Filled text fields have a solid background fill and a bottom border. They are more visually prominent and work well in dense forms.
Supporting text
Error State
Text fields display error states with a red border and error message when validation fails.
Please enter a valid email address
Please enter a valid email address
Disabled State
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| focusBorderColor | color | #6750A4 | #038012 | #1A5129 |
| labelColor | color | #49454F | #666666 | #4A4A4A |
| focusLabelColor | color | #6750A4 | #038012 | #1A5129 |
| errorColor | color | #B3261E | #C53030 | #C53030 |
| borderRadius | string | 4px | 4px | 4px |
| filledBackground | color | #E7E0EC | #F6ECDA | #F2E8DD |
| inputPadding | string | 16px 12px | 16px 12px | 16px 12px |
| fontSize | string | 16px | 16px | 16px |
| labelFontSize | string | 12px | 12px | 12px |
| outlineBorderWidth | string | 1px / 2px (focus) | 1px / 2px (focus) | 1px / 2px (focus) |
| textColor | color | #1D1B20 | #038012 | #1A1A1A |
Usage Guidelines
- Outlined: Use in forms where you need clear visual boundaries between fields
- Filled: Use in dense forms or when fields need more visual weight
- Always include clear labels for accessibility
- Provide helpful supporting text for complex inputs
- Show error states with descriptive error messages