Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProAn accordion whose closed panels stay searchable with find-in-page, with single or multiple open panels and Arrow, Home and End navigation between headers.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for an FAQ or a settings list that people will also try to find with the browser's search. It keeps the text in the page, so find-in-page and shared text links land on the right answer.
Do not use it for one region (use disclosure) or for navigation (use a tree or menu). Very long sections are better as their own pages.
It builds on disclosure, which the CLI installs for you.
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | single | One open panel at a time or many. |
value | string | null | string[] | - | Controlled open panel(s). |
defaultValue | string | null | string[] | - | Initial open panel(s). |
onValueChange | (value) => void | - | Called with the new value, also when find-in-page reveals a panel. |
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Unique id of the item. |
| Prop | Type | Default | Description |
|---|---|---|---|
headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of the heading that wraps the button. |
aria-expanded and aria-controls; each panel is a region labelled by its header.hidden="until-found"; a beforematch event opens the matching panel, closing the others in single mode.prefers-reduced-motion.| Key | Action |
|---|---|
| Enter or Space | toggles the focused header |
| ArrowDown | next header (wraps) |
| ArrowUp | previous header (wraps) |
| Home | first header |
| End | last header |
The component ships a Testing Library test (found-accordion.test.tsx) that covers single and multiple modes, until-found and beforematch, Arrow, Home and End and the heading structure.