Composite
Number Field Requires JS
Numeric input with stepper buttons, min / max / step, and clamping. Native <input type="number"> on steroids.
About
Overview
Use Number Field for quantities, prices, ages, durations — anywhere a precise number matters. Renders bigger increment / decrement buttons than the native browser controls and clamps to your min / max.
Live
Demo
<ren-number-field name="qty" value="3" min="0" max="99" step="1">
<label slot="label">Quantity</label>
</ren-number-field>Reference
API
| Attribute | Type | Default | Notes |
|---|---|---|---|
value | number | — | Current value. Submitted with the form. |
min / max | number | — | Clamped on input and on stepper press. |
step | number | 1 | Stepper increment / decrement size. |
Inclusive by default
Accessibility
- The actual control is a real
<input type="number">with native validation and form participation. - Stepper buttons have
aria-label="Increment"/"Decrement"and stay keyboard-reachable. - Arrow Up / Down on the input also steps by
step.