Number Input
Overview
Usage
Examples
API
A number input is a numeric field with a ± spinbox for stepping by a fixed amount, plus min/max clamping. RhombusKit's <rhombus-number-input> pairs Material's <mat-form-field> chrome with a bespoke stepper over a native <input type="number"> — so it's an accessible spinbutton out of the box — and routes every colour through the token contract.
Example
When to use
- For a precise numeric entry where the exact value matters — seats, ages, prices, years.
- When stepping by a fixed amount (± buttons, arrow keys) and clamping to a range is helpful.
When not to use
- For choosing a value along a visible range where the exact number is secondary, use a Slider.
- For unbounded numeric text with no stepper (e.g. a free-form amount), a plain Input with
type="number"is enough. - For a compact count without form-field chrome — a cart row, sets and reps — use a Quantity Input.
Related components
- Slider — pick a value along a draggable range.
- Input — free-form text (including
type="number"). - Quantity Input — the same spinbox without the form-field shell.
Was this page helpful?