Skip to content

role spinbutton

Number field draft v0.1.0

Lets people enter a number, by typing it or stepping it up and down.

A number field collects a numeric value within optional bounds and steps: a quantity, a percentage, a year. It is a Text field for numbers, with the platform's own stepping control (arrow keys, a spin control) and validation of the bounds. A value whose exact figure matters less than its position in a range is a Slider; a phone number or a postal code is text, not a number: use a Text field.

Playground

HTML 
<div class="ds-number-field" data-size="medium">
  <label
    class="ds-number-field__label"
    data-part="label"
    for="ds-number-field-27"
  >Quantity</label>
  <input
    type="number"
    class="ds-number-field__control"
    data-part="control"
    id="ds-number-field-27"
    value="2"
    min="1"
    max="99"
  >
</div>