Filled Text Field
- 1: Container
- 2: Leading icon (optional)
- 3: Label text (empty)
- 4: Label text (populated)
- 5: Trailing icon (optional)
- 6: Active Indicator (focused)
- 7: Caret
- 8: Input text
- 9: Supporting text (optional)
- 10: Active Indicator (enabled)
States
- 1: Enabled (empty)
- 2: Focused (empty)
- 3: Disabled (empty)
- 4: Enabled (populated)
- 5: Focused (populated)
- 6: Disabled (populated)
Error States
- 1: Enabled (empty)
- 2: Focused (empty)
- 3: Enabled (populated)
- 4: Focused (populated)
Specs
Enabled
Details
Container
| Token | Value |
|---|---|
| ds.comp.filledTextField.containerPaddingVertical | 8dp |
| ds.comp.filledTextField.containerPaddingHorizontal | 12dp |
| ds.comp.filledTextField.containerGap | 16dp |
Details
Leading icon
| Token | Value |
|---|---|
| ds.comp.filledTextField.leadingIconSize | 24dp |
| ds.comp.filledTextField.leadingIconColor | ds.sys.color.onSurfaceVariant |
Details
Label
| Token | Value |
|---|---|
| ds.comp.filledTextField.labelTypeScale | ds.sys.typeScale.bodySmall |
| ds.comp.filledTextField.labelColor | ds.sys.color.onSurfaceVariant |
Details
Trailing icon
| Token | Value |
|---|---|
| ds.comp.filledTextField.trailingIconSize | 24dp |
| ds.comp.filledTextField.trailingIconColor | ds.sys.color.onSurfaceVariant |
Details
Active indicator
| Token | Value |
|---|---|
| ds.comp.filledTextField.activeIndicatorHeight | 1dp |
| ds.comp.filledTextField.activeIndicatorColor | ds.sys.color.onSurfaceVariant |
Details
Caret
| Token | Value |
|---|---|
| ds.comp.filledTextField.caretColor | ds.sys.color.primary |
Details
Input text
| Token | Value |
|---|---|
| ds.comp.filledTextField.inputTextTypeScale | ds.sys.typeScale.bodyLarge |
| ds.comp.filledTextField.inputTextColor | ds.sys.color.onSurface |
Details
Supporting text
| Token | Value |
|---|---|
| ds.comp.filledTextField.supportingTextTypeScale | ds.sys.typeScale.bodySmall |
| ds.comp.filledTextField.supportingTextColor | ds.sys.color.onSurfaceVariant |
Focused
Details
Label
| Token | Value |
|---|---|
| ds.comp.filledTextField.focusedLabelColor | ds.sys.color.primary |
Details
Active indicator
| Token | Value |
|---|---|
| ds.comp.filledTextField.focusedActiveIndicatorHeight | 2dp |
| ds.comp.filledTextField.focusedActiveIndicatorColor | ds.sys.color.primary |
Disabled
Details
Leading icon
| Token | Value |
|---|---|
| ds.comp.filledTextField.disabledLeadingIconColor | ds.sys.color.onSurface |
| ds.comp.filledTextField.disabledLeadingIconOpacity | ds.sys.state.disabledOnContainerOpacity |
Details
Label
| Token | Value |
|---|---|
| ds.comp.filledTextField.disabledLabelColor | ds.sys.color.onSurface |
| ds.comp.filledTextField.disabledLabelOpacity | ds.sys.state.disabledOnContainerOpacity |
Details
Trailing icon
| Token | Value |
|---|---|
| ds.comp.filledTextField.disabledTrailingIconColor | ds.sys.color.onSurface |
| ds.comp.filledTextField.disabledTrailingIconOpacity | ds.sys.state.disabledOnContainerOpacity |
Details
Active indicator
| Token | Value |
|---|---|
| ds.comp.filledTextField.disabledActiveIndicatorColor | ds.sys.color.onSurface |
| ds.comp.filledTextField.disabledActiveIndicatorOpacity | ds.sys.state.disabledOnContainerOpacity |
Details
Input text
| Token | Value |
|---|---|
| ds.comp.filledTextField.disabledInputTextColor | ds.sys.color.onSurface |
| ds.comp.filledTextField.disabledInputTextOpacity | ds.sys.state.disabledOnContainerOpacity |
Details
Supporting text
| Token | Value |
|---|---|
| ds.comp.filledTextField.disabledSupportingTextColor | ds.sys.color.onSurface |
| ds.comp.filledTextField.disabledSupportingTextOpacity | ds.sys.state.disabledOnContainerOpacity |
Error
Details
Label
| Token | Value |
|---|---|
| ds.comp.filledTextField.errorLabelColor | ds.sys.color.error |
Details
Trailing icon
| Token | Value |
|---|---|
| ds.comp.filledTextField.errorTrailingIconColor | ds.sys.color.error |
Details
Active indicator
| Token | Value |
|---|---|
| ds.comp.filledTextField.errorActiveIndicatorColor | ds.sys.color.error |
Details
Supporting text
| Token | Value |
|---|---|
| ds.comp.filledTextField.errorSupportingTextColor | ds.sys.color.error |