Spinbutton Example

The below example section contains a simple personal information input form divided into 3 sections that demonstrates the design pattern for accordion. In this implementation, one panel of the accordion is always expanded, and only one panel may be expanded at a time.

Example

Keyboard Support

Key Function
Up Arrow When focus is on the spinbutton, increases the value.
Down Arrow When focus is on the spinbutton, decreases the value.
Home When focus is on the spinbutton, sets value to its minimum if aria-valuemin is provided.
End When focus is on the spinbutton, sets value to its maximum if aria-valuemax is provided.
Page Up (Optional) When focus is on the spinbutton, increases the value by a larger step than Up Arrow.
Page Down (Optional) When focus is on the spinbutton, decreases the value by a larger step than Down Arrow.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
spinbutton input
aria-valuemin input
aria-valuemax input
aria-valuenow input
aria-valuetext input
aria-label input

Javascript and CSS Source Code

HTML Source Code