Spin Button

spin-button

The spin button is a form input that can be used in place of an input type="number".

Work in progress

I'm currently working on the design of the documentation and how to include demonstrations and code examples for the components.

Demonstration

Under construction

Example usage

     <form id="form" method="get">
  <label id="label-for-rating">Rate this out of 5</label>
  <spin-button id="rating"
               name="rating"
               aria-labelledby="label-for-rating"
               min="0"
               max="5"
               step="0.1"
               value="5"
  ></spin-button>
</form>

Accessibility

If a label has been associated to the spin-button, then clicking on the label will open the list of options for the selector.

Keyboard navigation is also available. The element is focusable with tab.

up will increment the value by the step attribute
down will decrement the value by the step attribute
pageUp will increment the value by 10 times the step attribute
pageDown will decrement the value by 10 times the step attribute
home will set the value to the minimum, if it has been set
end will set the value to the maximum, if it has been set

In addition to the above keyboard commands, the user is able to type a numerical input.

Screen readers

Screen reader users will be informed that they have focused on a spinbutton, along with the label associated with the spin-button. They will also be informed on the current value and whether it is a valid entry.

As the user modifies the value, it will announce the new values accordingly.

Attributes

The following attributes can be used on the spin-button element:

autofocus: When present, automatically focus this spin-button on page load.
disabled: When present, makes the spin-button not mutable, focusable, and prevents it from being submitted with the form.
form: The ID of the form that this spin-button is attached to. If it is not set, then the spin-button is attached to the closest form ancestor.
max: The maximum value of the spin-button.
min: The minimum value of the spin-button.
name: The name of the spin-button used when submitting.
required: When present, determines if the spin-button must have a value.
readonly: When present, determines if the value of the spin-button can be changed.
step: The amount the value of the spin-button can be incremented or decremented by.
tabIndex: Sets where the spin-button participates in sequential keyboard navigation.
value: The value of the spin-button.

Form data

The spin-button can be used in forms, and its name/value pair will be included in the GET or POST data submitted by its associated form.

API

The following methods and properties can be called/access on the spin-button element:

decrement(number: times = 1): Decrement the value by the number of steps specifed by times. If the resulting value is less than the minimum, then the value won't be changed.
increment(number: times = 1): Increment the value by the number of steps specifed by times. If the resulting value is greater than the maximum, then the value won't be changed.
labels (readonly): Returns a NodeList of the label elements associated with the spin-button.

More information

Aria Authoring Practices Guide: SpinButton