Data display
Counter
A numeric stepper with clear states, for quantities such as seats.
Examples
Medium · decrease disabled at the minimum
Seats
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Decrease | 44px button | Required |
| 2 | Value | <output>, announced politely | Required |
| 3 | Increase | 44px button | Required |
Specifications
| Default size | Medium |
|---|---|
| Themes | Light · Dark |
Interaction
| Key | Result |
|---|---|
| Tab | Moves between decrease and increase |
| Enter Space | Steps the value |
| Hold | Optional: repeats after 400ms |
| Trigger | Response |
|---|---|
| Click | Steps by one |
| At limit | The button disables, with a text reason nearby |
Accessibility
role · group with a live value
1.3.1Info and Relationships4.1.2Name, Role, Value4.1.3Status Messages
| Requirement | How Rig meets it |
|---|---|
| Names | Buttons say what they change: Decrease seats |
| Announcement | aria-live="polite" on the value |
| Direct input | If large numbers are common, use a number input instead |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Disable at the minimum and maximum | Do not use for ranges (use Slider) |