| State |
Visual change |
Tokens |
| Default |
Input border, raised background |
color-border-input, color-surface-raised |
| Focus |
The border takes the focus colour; 2 px outer focus outline with a 2 px gap |
color-border-focus, color-focus-ring |
| Invalid |
Danger border, a 2 px danger halo around it and error text |
color-border-danger, color-status-danger-background, color-text-danger |
| Counter near the limit |
Counter in the warning colour |
color-text-warning |
| Counter over the limit |
Counter and border in the danger colour |
color-text-danger, color-border-danger |
| Read-only |
The look does not change; the value cannot be changed |
- |
| Disabled |
Faded background, border and text |
color-surface-disabled, color-border-disabled, color-text-disabled |
| Property |
Value |
Token |
| Minimum height |
rows lines (default 3) |
- |
| Auto-resize limit |
maxRows lines (default 8); on by default |
- |
| Inline padding |
input-padding-inline |
input-padding-inline |
| Block padding |
8 px |
space-md |
| Corner radius |
input-radius |
input-radius |
| Text style |
body-md (14 px) |
text.body-md |
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-surface-raised | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-color-surface-disabled | | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 |
--bigbang-color-text-placeholder | | #737373#737373#737373 | #a1a1a1#a1a1a1#a1a1a1 |
--bigbang-input-radius | | 10px10px10px | 10px10px10px |
--bigbang-input-padding-inline | | 12px12px12px | 12px12px12px |
--bigbang-space-md | | 8px8px8px | 8px8px8px |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Focus, invalid and disabled colours |
Border, background and text colour (motion.field) |
motion-focus-duration (110 ms) |
motion-focus-easing |
Unchanged; it is a colour change only. |
| Focus ring |
No transition, at once |
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. |
| Auto-resize |
The height follows the content at once; no transition |
None |
None |
Unchanged. |
See Motion for the values.