← All patterns · Input widgets
Spinbutton
Numeric value with up/down increment controls.
Pattern
A spinbutton holds a numeric value the user can adjust with arrow keys or visible increment / decrement buttons. Typical for quantities, time pickers.
Roles
spinbutton
States and properties
aria-valuenow- Current value.
aria-valuemin / aria-valuemax- Bounds.
Keyboard interaction
- Up / Down arrow
- Increment / decrement.
- Page Up / Page Down
- Larger step.
WCAG criteria
- 2.1.1 — Keyboard
Canonical reference
More
- All patterns
- WidgetPatternAnalyzer — the analyser that validates these patterns.
- Back to Paradise