RhombusKit

Number Input

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 — quantities, ages, counts, prices.
  • 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 quantity), a plain Input with type="number" is enough.

Related components

  • Slider — pick a value along a draggable range.
  • Input — free-form text (including type="number").

Was this page helpful?