| State |
Visual change |
Tokens |
| Empty |
Placeholder, search icon |
color-text-placeholder, color-text-subtle |
| With a value |
The clear button grows in |
color-text-subtle |
| Loading |
A spinner in place of the icon |
period-spinner |
| Focus |
Focus border and 2 px ring |
color-border-focus, color-focus-ring |
| Disabled |
Faded box; clear button hidden |
color-surface-disabled, color-text-disabled |
| Property |
Value |
Token |
| Height |
32 / 36 / 40 px |
input-height-sm, input-height-md, input-height-lg |
| Search icon |
16 px |
icon-size-sm |
| Clear button |
24 / 28 / 32 px |
input-action-size-sm, input-action-size-md, input-action-size-lg |
| Icon to text |
6 px |
space-sm |
Values are shown for the selected brand; switch brands from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-input-height-md | | 36px36px36px | 36px36px36px |
--bigbang-input-height-lg | | 40px40px40px | 40px40px40px |
--bigbang-input-action-size-md | | 28px28px28px | 28px28px28px |
--bigbang-input-action-size-lg | | 32px32px32px | 32px32px32px |
--bigbang-icon-size-sm | | 16px16px16px | 16px16px16px |
--bigbang-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-color-border-input | | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Clear button appears |
Grows from 60 % and fades in (motion.success) |
motion-feedback-duration |
motion-feedback-easing |
Scale 1; it only fades. |
| Pressing the clear button |
scale (motion.press) |
motion-press-duration |
motion-press-easing |
Scale stays 1. |
| Icon to spinner |
Cross-fade (motion.reveal) |
motion-skeleton-reveal-duration |
easing-productive-enter |
Unchanged; a short fade. |
| Loading |
The spinner turns |
period-spinner |
Linear |
It stops; the state is announced in text. |
See Motion for values.