Quantity Input
Overview
Usage
Examples
API
A quantity input is a compact count — a label, a round − button, the number, and a round + button in one row. RhombusKit's <rhombus-quantity-input> has no form-field chrome at all: the number is a borderless native <input type="number"> (an accessible spinbutton out of the box), the buttons are round outlined circles sized from the density scale, and every colour routes through the token contract. It shares its stepping, clamping and keyboard behaviour with Number Input.
Example
When to use
- For a count in a row, card, list or toolbar — cart quantity, sets and reps — where a full form field would be too heavy.
- When the value is a small bounded integer that is mostly stepped, occasionally typed.
When not to use
- For labelled numeric entry inside a form — with a hint, an error message, a currency prefix or a fill/outline appearance — use a Number Input.
- For choosing a value along a visible range where the exact number is secondary, use a Slider.
- For values wider than four digits: the number box is fixed at three rem; use a Number Input.
Related components
- Number Input — the same spinbox inside a Material form field.
- Slider — pick a value along a draggable range.
Was this page helpful?