CynosureComponents / Structure
Accordion
A stack of collapsible sections that share state: one open at a time, or any number. Each section is a Disclosure.
When to useLink to "When to use"
- Settings and FAQs split into named sections people scan by title.
type="single": focus on one section at a time. Addcollapsibleto allow closing it again.type="multiple": people compare or fill in several sections.
Use something else when:
- there is only one section: Disclosure
- the sections are alternative views of one thing: Tabs
- everything should be readable at once: headings in a Stack
UsageLink to "Usage"
tsx
import { Accordion, AccordionItem } from "@arshad-shah/cynosure";
<Accordion type="single" defaultValue="format" collapsible onValueChange={setSection}>
<AccordionItem value="format" summary="Formatting">…</AccordionItem>
<AccordionItem value="validate" summary="Validation">…</AccordionItem>
</Accordion>
<Accordion type="multiple" defaultValue={["format"]} variant="card">…</Accordion>Several openLink to "Several open"
CardsLink to "Cards"
PropsLink to "Props"
| Prop | What it does | Type | Default |
|---|---|---|---|
type | One section open at a time. Any number of sections open. | "single" | "multiple" | |
value | Controlled: the value of the open section, or undefined for none (passing the prop at all makes it controlled). Controlled: the value of every open section. | string | string[] | |
defaultValue | The section open at first, when uncontrolled. The sections open at first, when uncontrolled. | string | string[] | |
onValueChange | Called when a section opens or closes, with the open section's value (undefined when none is open). Called when a section opens or closes, with the value of every open section. | ((value: string | undefined) => void) | ((value: string[]) => void) | |
collapsible | The open section can be closed, leaving none open. Not used here: with type="multiple" every section can always be closed. | boolean | |
variant | plain no chrome, line a divider under each section, card bordered surfaces. Default "line". | "plain" | "line" | "card" | "line" |
size | Size of every section's header and content. Default "md". | Size | "md" |
headingLevel | Heading level wrapping each header (default 3). | 2 | 3 | 4 | 5 | 6 | |
regions | Expose each open section as a labelled region. Turn off for long lists (more than about six sections). | boolean | |
className | Added to the root element, for layout. | string | |
style | Layout only. | CSSProperties | |
children | The sections: one AccordionItem each. | ReactNode |
Generated from the type definitions in @arshad-shah/cynosure 0.5.0.
AccordionItem: value (unique), summary (header text), children.
Behaviour and accessibilityLink to "Behaviour and accessibility"
| Input | Result |
|---|---|
| Click, tap, Enter, Space | Opens a section (closes the others in single) |
| Tab | Next header or open content (every header is a Tab stop) |
| Down arrow Up arrow arrows | Next / previous header, wrapping |
| Home End | First / last header |
- Headings: each header sits in a heading (
headingLevel, default 3), so sections appear in the page outline. - Regions: open sections are regions labelled by their header. Pass
regions={false}for long lists, where many landmarks get noisy. - Non-collapsible: in
singlemode withoutcollapsible, the open header isaria-disabled, because pressing it would do nothing.
TouchLink to "Touch"
Headers are the full width and at least 44px tall on coarse pointers.
ThemingLink to "Theming"
--cy-accordion-gap spaces the card variant. Everything else uses the Disclosure tokens.
RelatedLink to "Related"
These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.