Data display
Accordion
Collapsible sections with a chevron and an open content slot.
Examples
How do I implement tokens?
Tokens resolve from a central schema and map to CSS variables.
Can I self-host this system?
Yes.
Disabled item
States
CollapsedExpanded (chevron up)HoveredDisabled
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Header | Button with title and chevron | Required |
| 2 | Chevron | Rotates 180° on expand | Required |
| 3 | Panel | Content slot, 16px padding | Required |
Specifications
| Width | 400px, height variable |
|---|---|
| Corner radius | 12px |
| Content padding | 16px |
| Motion | Height animates automatically on expand |
| Disabled | Opacity 40%, header not clickable |
Interaction
| Key | Result |
|---|---|
| Tab | Moves between headers |
| Enter Space | Expands or collapses |
| ↑ ↓ | Optional: moves between headers |
| Trigger | Response |
|---|---|
| Click | Height animates (200ms), chevron rotates |
| Hover | Header tint |
Accessibility
role · disclosure
2.1.1Keyboard4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Semantics | <details> and <summary>, or a button with aria-expanded and aria-controls |
| Heading | Wrap the button in a heading level that fits the page |
| Disabled | aria-disabled and 40% opacity; explain why when it matters |
| Reduced motion | Open and close without the height animation |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Keep headers short and descriptive | Do not hide content people need to compare |
| Do not nest accordions |