Feature Description
Angular Aria currently lacks a spinbutton primitive.
The APG Spinbutton Pattern defines it as an input widget that restricts its value to a set or range of discrete values.
Keyboard Interaction (per APG)
| Key |
Function |
| Up Arrow |
Increases the value |
| Down Arrow |
Decreases the value |
| Home |
Sets value to minimum (if defined) |
| End |
Sets value to maximum (if defined) |
| Page Up |
Increases value by larger step (optional) |
| Page Down |
Decreases value by larger step (optional) |
Required ARIA Attributes
role="spinbutton" on the focusable element
aria-valuenow - Current value
aria-valuemin / aria-valuemax - Min/max allowed values
aria-valuetext - User-friendly string (e.g., "Monday" instead of "1")
aria-labelledby or aria-label - Accessible name
aria-invalid="true" - When value is outside allowed range
References
APG Specification
React Aria Prior Art
React Aria uses spinbuttons internally for date/time segment navigation:
Implementation
PR: #32663
Use Case
- Quantity Selection - Hotel booking, shopping carts, product pages
- Time Input - Time pickers with hours, minutes, seconds segments
- Date Picker Components - Date range selectors using spinbuttons for date segments
- Toolbar Controls - Font size and property controls in text editors
- Numeric Input with Constraints - Any value selection within a min/max range
Feature Description
Angular Aria currently lacks a spinbutton primitive.
The APG Spinbutton Pattern defines it as an input widget that restricts its value to a set or range of discrete values.
Keyboard Interaction (per APG)
Required ARIA Attributes
role="spinbutton"on the focusable elementaria-valuenow- Current valuearia-valuemin/aria-valuemax- Min/max allowed valuesaria-valuetext- User-friendly string (e.g., "Monday" instead of "1")aria-labelledbyoraria-label- Accessible namearia-invalid="true"- When value is outside allowed rangeReferences
APG Specification
Example
spinbutton)
React Aria Prior Art
React Aria uses spinbuttons internally for date/time segment navigation:
Implementation
PR: #32663
Use Case