Accordion
Collapses long content behind labelled triggers. One or many sections open at a time, depending on type.
Preview
Types
The type prop selects between single-open and multiple-open behaviour. Combine type="single" with collapsible to allow closing the active item.
Usage
Use Accordion to collapse long, scannable content into named groups.
Nest accordions inside other accordions — the affordance becomes unclear.
Write trigger labels as short, scannable noun phrases or questions.
Hide critical first-step content behind a closed trigger by default.
Use type=multiple when items are independent reference material.
Use type=single + collapsible for a stepper or wizard — that is a different pattern.
Code
1<Accordion.Root type="single" collapsible className="lex-accordion">2 <Accordion.Item value="a" className="lex-accordion__item">3 <Accordion.Header className="lex-accordion__header">4 <Accordion.Trigger className="lex-accordion__trigger">5 What is Lexicon?6 </Accordion.Trigger>7 </Accordion.Header>8 <Accordion.Content className="lex-accordion__content">9 A design system for the pace's products.10 </Accordion.Content>11 </Accordion.Item>12</Accordion.Root>
Design tokens
| Token | Usage |
|---|---|
--color-border | Item separator and root rule |
--color-text | Trigger label colour |
--color-text-2 | Content body colour |
--color-accent | Trigger label hover colour |
--color-text-muted | Chevron icon colour |
--transition-base | Chevron rotation transition |
Accessibility
Accordion implements the WAI-ARIA accordion pattern via Radix. Each trigger is wrapped in a heading that exposes aria-expanded and aria-controls. Use the appropriate heading level for the surrounding page hierarchy.
| Space/Enter | Toggle the focused trigger |
| Tab | Move focus to the next focusable element |
| ↑/↓ | Move focus between triggers |
| Home | Move focus to the first trigger |
| End | Move focus to the last trigger |