Component · 14
Accordion
Sections that open and close, set as a ruled list. Each header is a real button inside a heading, so the titles show up in the page outline and screen readers announce expanded or collapsed. Built on Base UI.
One at a time
Opening a section closes the others. Enter or Space toggles; each header is its own tab stop.
A small React component library with a paper-and-ink look: hard shadows, ruled borders, warm paper.
<Accordion defaultValue={["what"]}>
<AccordionItem value="what">
<AccordionTrigger>What is gnoud-ui?</AccordionTrigger>
<AccordionPanel>A small React component library…</AccordionPanel>
</AccordionItem>
<AccordionItem value="tailwind">
<AccordionTrigger>Does it need Tailwind?</AccordionTrigger>
<AccordionPanel>No. It ships one stylesheet…</AccordionPanel>
</AccordionItem>
</Accordion>Several open
A small React component library with a paper-and-ink look: hard shadows, ruled borders, warm paper.
Yes. It follows the operating system, or you can force it with data-theme on any ancestor.
<Accordion multiple defaultValue={["what", "dark"]}>…</Accordion>A disabled section
<AccordionItem value="soon" disabled>
<AccordionTrigger>Coming soon</AccordionTrigger>
<AccordionPanel>…</AccordionPanel>
</AccordionItem>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| Accordion multiple | boolean | false | Allow several sections open at once. By default opening one closes the others. |
| Accordion value / defaultValue | string[] | [] | Which items are open, by their value. Controlled with value + onValueChange. |
| Accordion onValueChange | (value, details) => void | - | Fires when a section opens or closes. |
| Accordion hiddenUntilFound | boolean | false | Lets the browser's find-in-page open a closed section. |
| AccordionItem value | string | auto | This section's id in the open list. |
| AccordionItem disabled | boolean | false | Visible but cannot be toggled. |
Arrow keys do not move between headers: they are ordinary buttons in the tab order, which the WAI-ARIA accordion pattern allows. Use Tabs when you want arrow-key navigation.