NAVIGATION / COMPONENTS
Accordion
Reveal supporting detail on demand.
About accordion
Use for supporting information when an overview matters. Keep essential task instructions visible.
01
Anatomy
Shared parts, named consistently.
How do design tokens work?
Tokens connect repeatable design decisions to meaningful names, so a theme can change without rebuilding every component.
- 1Disclosure control
A named, keyboard-operable interaction with visible focus and state feedback.
- 2Summary
Content or structure that supports the component’s purpose and reading order.
- 3Indicator
Reinforces meaning or state. Provide text whenever the meaning is essential.
- 4Content
Content or structure that supports the component’s purpose and reading order.
Try the default
A working example with the shared V1 visual language.
How do design tokens work?
Tokens connect repeatable design decisions to meaningful names, so a theme can change without rebuilding every component.
When to use
Use for supporting information when an overview matters. Keep essential task instructions visible.
Native summary responds to Enter and Space; its expanded state is announced.