Number input | Glaze design system

Sizes

When to use it

Use: A count or an amount the person nudges more than types: retries, a timeout, a token budget.
Use: A number with bounds the field should hold to (min, max).
Not for: A rough value on a scale where the exact number matters less. Use Slider.
Not for: An ID, a code or a phone number; digits are not a quantity. Use Input.
Not for: A one-time code. Use OTP input.

6 rules

Must: Pass the unit as unit, never in the label or as text beside the pill. Because unit sits inside the line and is read with the value ("30 s"); beside the pill it is outside the field and read separately.
Must: Set min and max when the value has limits. Because without them the steppers walk past the limit and the error arrives only on submit.
Must: Name it with a Field and FieldLabel, or aria-label. Because the steppers say Increase and Decrease, and nothing says what.
Never: Use it for an ID, a card number or a phone number. Because the steppers and the arrow keys change digits that are a name, not a quantity, and leading zeros are dropped.
Should: Set step to the change a person makes, and largeStep to ten of them.
Should: Pass format for currency or percent instead of a unit.

5 states, highest first

4 checks

: The text is a textbox with inputmode="decimal"; Base UI keeps the value clamped and announces the formatted number.
: The steppers are named Increase and Decrease and stay out of the tab order; the arrow keys do their job from the text.
: The unit is in the pill for the eye and read through the label or aria-describedby for a screen reader.
: Focus darkens the line to --line-focus, as Input does.

3 keys

5 edge cases

8 props

19 tokens