RRenDSv0.14.1
GitHubGet started

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

<label class="ren-field-label" for="qty">Quantity</label>
<ren-number-field class="ren-number-field" min="0" max="99" step="1" value="3">
  <button type="button" class="ren-number-field-decrement" aria-label="Decrease"></button>
  <input class="ren-number-field-input" type="number" id="qty">
  <button type="button" class="ren-number-field-increment" aria-label="Increase"></button>
</ren-number-field>

Reference

API

AttributeTypeDefaultNotes
valuenumber—Current value. Submitted with the form.
min / maxnumber—Clamped on input and on stepper press.
stepnumber1Stepper 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="Increase" / "Decrease" and stay keyboard-reachable. The component fills them in from utils/i18n.js if you leave them off.
  • Arrow Up / Down on the input also steps by step.