| State |
Visual change |
Tokens |
| Default |
Input border and the field shadow on the raised surface |
color-border-input, color-surface-raised, input-shadow |
| Focus |
The border turns to the focus colour; a 2 px focus outline is drawn 2 px outside the box |
color-border-focus, color-focus-ring, border-width-focus, focus-offset |
| Error |
Danger border with a 2 px danger halo around it |
color-border-danger, color-status-danger-background |
| Disabled |
Disabled surface, border and text |
color-surface-disabled, color-text-disabled |
| Property |
sm |
md (default) |
lg |
Token |
| Height |
32 px |
36 px |
40 px |
input-height-sm, input-height-md, input-height-lg |
| Start padding |
12 px |
12 px |
12 px |
input-padding-inline |
| Chevron |
16 px, 8 px from the end |
16 px, 8 px from the end |
16 px, 8 px from the end |
icon-size-sm, space-md |
| Corner radius |
10 px |
10 px |
10 px |
input-radius (radius-lg) |
Sizes sm, md and lg match the TextInput and Button sizes of the same name.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-border-input | | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 |
--bigbang-color-surface-raised | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-input-shadow | | 0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744) | 0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0) |
--bigbang-color-border-focus | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-color-border-danger | | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 |
--bigbang-color-status-danger-background | | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d |
--bigbang-color-surface-disabled | | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 |
--bigbang-input-height-sm | | 32px32px32px | 32px32px32px |
--bigbang-input-height-md | | 36px36px36px | 36px36px36px |
--bigbang-input-height-lg | | 40px40px40px | 40px40px40px |
--bigbang-input-radius | | 10px10px10px | 10px10px10px |
--bigbang-input-padding-inline | | 12px12px12px | 12px12px12px |
Border and fill change on focus and error with motion.field; the focus outline appears at once. The list opens with the browser’s own motion.