| State |
Visual change |
Tokens |
| Default |
Input border and raised background on the box; faded addon text |
color-border-input, color-surface-raised, color-text-subtle |
| Focus |
The box border takes the focus colour; 2 px outer focus outline with a 2 px gap |
color-border-focus, color-focus-ring |
| Invalid |
Danger border on the box, a 2 px danger halo around it and error text |
color-border-danger, color-status-danger-background, color-text-danger |
| Disabled |
Faded background, border and addon text |
color-surface-disabled, color-border-disabled, color-text-disabled |
| Property |
Value |
Token |
| Input row height |
32, 36 or 40 px |
input-height-sm, input-height-md, input-height-lg |
| Edge padding |
input-padding-inline |
input-padding-inline |
| Addon text |
label-md (14/20, medium weight), subtle colour |
text.label-md, color-text-subtle |
| Gap inside an addon |
8 px |
space-md |
| Block addon padding toward the box edge |
8 px |
space-md |
| Block addon divider |
1 px, only with divider |
color-border-subtle |
InputGroup.Button |
24 px tall (square when icon-only), 6 px inline padding, radius-sm; 8 px from the box edge |
input-group-button-size, space-sm, space-md |
| Corner radius |
input-radius |
input-radius |
Values are shown for the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-border-input | | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 |
--bigbang-color-border-focus | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-color-border-danger | | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 |
--bigbang-color-border-subtle | | #ededed#ededed#ededed | #303030#303030#303030 |
--bigbang-color-surface-raised | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-input-height-md | | 36px36px36px | 36px36px36px |
--bigbang-input-height-lg | | 40px40px40px | 40px40px40px |
--bigbang-input-radius | | 10px10px10px | 10px10px10px |
--bigbang-input-padding-inline | | 12px12px12px | 12px12px12px |
--bigbang-input-group-button-size | | 24px24px24px | 24px24px24px |
--bigbang-space-md | | 8px8px8px | 8px8px8px |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Focus, invalid and disabled colours |
The box border and background colour (motion.field) |
motion-focus-duration (110 ms) |
motion-focus-easing |
Unchanged; it is a colour change only. |
| Focus ring |
On the whole box, without a transition |
None |
None |
Unchanged. |
| Error message enter |
opacity and a 4 px drop (motion.fieldMessage) |
motion-collapsible-duration (150 ms) |
motion-collapsible-easing |
The distance becomes 0; the text only appears. |
| Button in an addon |
motion.press (97 % scale, motion-press-scale) |
motion-press-duration (70 ms), motion-release-duration (230 ms) |
motion-press-easing |
Scale stays at 1. |
See Motion for the values.