Accordion
Springy height-morph accordion panels that fold open with a blur-in on the copy.
API reference
Components
<Accordion />
Accordion root: Base UI open state plus optional deep-linking.
multiple?
Whether multiple rows can be open at once. Defaults to false.
defaultValue?
Values open on first render (uncontrolled).
value?
Controlled open values.
onValueChange?
Called with the next open values whenever a row is toggled.
deepLink?
Open and scroll to the row matching the URL fragment. Defaults to false.
className?
Merged onto the container element.
children?
The AccordionItem rows.
<AccordionItem />
One disclosure row keyed by value.
value
Stable value for this row and its deep-link anchor id.
className?
Merged onto the row element.
children?
The row's AccordionTrigger and AccordionPanel.
<AccordionTrigger />
Accessible trigger with indicator slot.
children?
The trigger label.
indicator?
Open/closed indicator after the label. Defaults to <AccordionChevron />.
className?
Merged onto the <button>.
headingLevel?
Heading level wrapping the button. Defaults to 3.
inset?
Use inset focus ring inside overflow-hidden containers. Defaults to false.
<AccordionPanel />
Height-morph collapsible panel with fold mask and inner blur-in.
children?
The disclosed content.
className?
Merged onto the inner content wrapper.
<AccordionChevron />
Chevron indicator that rotates with row open state.
open?
Force open/closed state. Omit to read from the enclosing row.
className?
Merged onto the indicator.
<AccordionPlusMinus />
Plus/minus indicator that morphs with row open state.
open?
Force open/closed state. Omit to read from the enclosing row.
className?
Merged onto the indicator.
Hooks
useAccordionHash
Deep-link hook: opens row matching URL hash on mount and hashchange.
useAccordionHash(options: UseAccordionHashOptions): voidonMatch
Called with the matched fragment id on mount and on every hashchange.
ids?
Restrict matches to these ids. Omit to honour any fragment on the page.
enabled?
Turn the listener off. Defaults to true.
Functions
nextOpenIds
Toggle one value in the open set; under single-open, opening one closes the rest.
nextOpenIds(current: string[], value: string, singleOpen: boolean): string[]revealOpenIds
Ensure value is open (deep-link reveal, never closes).
revealOpenIds(current: string[], value: string, singleOpen: boolean): string[]Featured in
See the accordion composed into full sections.
