Number Input
ProA numeric input with increment/decrement stepper buttons for precise value adjustments. Supports min, max, and step constraints. Always uses type="number" or inputmode="numeric" for mobile keyboard optimization.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Number input with stepper buttons on the right edge. | Use for quantity selectors, age fields, or any bounded numeric input. |
| With Stepper | ||
| Currency |
Usage Guidelines
Do
Set sensible min, max, and step values to constrain input.
Don't
Use for phone numbers or credit card numbers — use text Input with inputmode="numeric".
Do
Display the current value prominently between stepper buttons.
Don't
Allow negative values unless the domain requires them.
Do
Disable the decrement button at min and increment button at max.
Don't
Omit min/max boundaries — unbounded numbers lead to edge-case bugs.
Do
Pair with a visible label describing the numeric field.
Don't
Code
Design Tokens
Accessibility
- Uses role="spinbutton" with aria-valuemin, aria-valuemax, and aria-valuenow.
- Stepper buttons have aria-label="Increase" and aria-label="Decrease".
- Value changes are announced to screen readers.
- Error state uses aria-invalid="true" and aria-describedby.