-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Open
Labels
featureThis issue represents a new feature or feature request rather than a bug or bug fixThis issue represents a new feature or feature request rather than a bug or bug fixneeds triageThis issue needs to be triaged by the teamThis issue needs to be triaged by the team
Description
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 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 range
References
APG Specification
- Spinbutton Pattern
- Quantity Spin Button
Example - Toolbar Example (includes font size
spinbutton)
React Aria Prior Art
React Aria uses spinbuttons internally for date/time segment navigation:
Implementation
Draft 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
DoronYitz, tomer953, shaharkazaz and eneajaho
Metadata
Metadata
Assignees
Labels
featureThis issue represents a new feature or feature request rather than a bug or bug fixThis issue represents a new feature or feature request rather than a bug or bug fixneeds triageThis issue needs to be triaged by the teamThis issue needs to be triaged by the team