Spin button Preview
A spin button is a specialized input that lets someone easily increase or decrease a value within a set range, like dates in a month.
Spin buttons are good for precise increments in small ranges. If the range is very large or very small (less than three values), use an input instead. If the values can be imprecise and a visual representation of the value on the range is helpful, try a slider.
Resources
Behavior
Spin button interactions
People can choose a value by entering the it directly into the input, using the keyboard arrows to change the value, or selecting the spin buttons to change the value.
The increments should be reasonable. For example if choosing dates in a month, increment by one. You can define a bulk set that may make it easier to navigate large ranges. People can increment in bulk steps using the Page up or Page down keys. They can also use the Home key to jump to the first defined value in the range or the end key to jump to the last defined value in the range.
Disabled spin buttons
When min or max values are reached, the appropriate spin button is disabled to let people know that they’ve reached the end of the range and can’t go any higher or lower.
While the spin buttons may be disabled, the input itself must always be enabled to reach an accessible target size.
Accessibility
Use aria-valuemin and aria-valuemax to define the size of the range. This communicates to screen readers the size of the acceptable range.
Content
Units of measurement
If there is a unit tied to the spin button, include it in the placeholder text by default. For example, “0 cm” or “12 pt.” For more info, see Units of measure terms in the Microsoft Writing Style Guide.
Use a label
A brief label should let people know what information to enter. Usually a noun or short phrase is best. For a standardized form component including helper text and validation styles, use the spin button field component.
Use sentence-style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.