The spin button is a form input that can be used in place of an
I'm currently working on the design of the documentation and how to include demonstrations and code examples for the components.
<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>
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 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.
The following attributes can be used on the
- When present, automatically focus this
spin-buttonon page load.
- When present, makes the
spin-buttonnot mutable, focusable, and prevents it from being submitted with the form.
- The ID of the form that this
spin-buttonis attached to. If it is not set, then the
spin-buttonis attached to the closest form ancestor.
- The maximum value of the
- The minimum value of the
- The name of the
spin-buttonused when submitting.
- When present, determines if the
spin-buttonmust have a value.
- When present, determines if the value of the
spin-buttoncan be changed.
- The amount the value of the
spin-buttoncan be incremented or decremented by.
- Sets where the
spin-buttonparticipates in sequential keyboard navigation.
- The value of 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.
The following methods and properties can be called/access on the
- 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
labelelements associated with the