Structure
An Input control for editing a numeric/quantity value with increment and decrement buttons next to it.
| Property | Token | Pixel | Rem |
|---|---|---|---|
| Border radius | radii-04 | 4px | 0.25 |
| Border radius merged | none | 0 | 0 |
Size
Number input has the same height as a regular Input Field. The buttons also correspond to the size of Action Icons “sm” and “md”.
| Property | sm | md | lg |
|---|---|---|---|
| height | 32px size-$4 | 40px size-$4 | - |
| icon size | 16px | 24px | - |
| Property | size | px |
|---|---|---|
| Width | size-$6 | 56px |
Typography
No changes, same as Input Field
Color
*Input same as Input Field
Buttons
| Property & Element - State | Token | Hex |
|---|---|---|
| Bg color - Default, Disabled | $white | # |
| Bg color - Hover | $grey100 | # |
| Bg color - Pressed | $grey200 | # |
| Border-color | $grey800 | # |
| Icon color - Default, Disabled | $grey600 | # |
| Icon color - Hover | $grey800 | # |
| Icon color - Pressed | $grey900 | # |