'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navigation
Accordion
Sections that expand and collapse: FAQs, settings groups, long details.
Ant Design: Collapse
import { Accordion, AccordionItem } from '@alea/ui';
Examples
FAQ
Separated cards, one open at a time.
Yes. Where Figma allows one mode per collection, the plugins fall back to groups.
Joined, several open
One card with dividers; allowsMultipleExpanded keeps several open.
Props
Accordion props
A list of sections that expand and collapse. allowsMultipleExpanded keeps several open.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "separated" | "joined" | 'separated' | separated cards (default) or one card with dividers. |
AccordionItem props
One expandable section. Works alone too (a single disclosure).
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | - | The always-visible header. |
headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Heading level for the header button. Default 3. |
Accessibility
- Each header is a heading with a button that says if it is expanded.
Keyboard
| Key | Does |
|---|---|
| Enter or Space | Expands or collapses |
Do and don't
Do
- Use questions as titles in an FAQ.
Don't
- Don't hide what most people need.