Search Field
- 1: Container
- 2: Search icon
- 3: Placeholder
- 4: Input Text
- 5: Clear icon
Specs
Enabled
Details
Container
| Token | Value |
|---|---|
| ds.comp.searchField.containerShape | ds.sys.shape.full |
| ds.comp.searchField.containerHeight | 56dp |
| ds.comp.searchField.containerPaddingHorizontal | 12dp |
| ds.comp.searchField.containerGap | 16dp |
| ds.comp.searchField.containerColor | ds.sys.color.surfaceContainer |
Details
Search icon
| Token | Value |
|---|---|
| ds.comp.searchField.searchIconSize | 24dp |
| ds.comp.searchField.searchIconColor | ds.sys.color.onSurfaceVariant |
Details
Placeholder
| Token | Value |
|---|---|
| ds.comp.searchField.placeholderColor | ds.sys.color.onSurfaceVariant |
Details
Caret
| Token | Value |
|---|---|
| ds.comp.searchField.caretColor | ds.sys.color.primary |
Details
Input text
| Token | Value |
|---|---|
| ds.comp.searchField.inputTextTypeScale | ds.sys.typeScale.bodyLarge |
| ds.comp.searchField.inputTextColor | ds.sys.color.onSurface |
Details
Clear icon
| Token | Value |
|---|---|
| ds.comp.searchField.clearIconSize | 24dp |
| ds.comp.searchField.clearIconColor | ds.sys.color.onSurface |