Accordion groups content into collapsible sections that users can expand or collapse on demand. It offers three visual variants and supports single or multiple expansion to organize content efficiently.
Props
Accordion
Name
Type
Default
Description
children
ReactNode
—
Compose {@link AccordionItem } children.
className
string
—
@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
collapsible
boolean
true
When false, the open item cannot collapse, so one item always stays open once opened.
Not applicable when several sections may be open.
defaultValue
string | string[]
—
Initial open item value when uncontrolled.
Initial list of open item values when uncontrolled.
initialItemId
string
—
Item value whose trigger receives the tab stop on the first render, including server markup, when no
section is open. An open section takes precedence. Without either, the first enabled trigger becomes the tab
stop once the triggers mount.
onValueChange
AccordionValueChangeHandler
—
Fires when a trigger requests a change.
type
AccordionType
AccordionType.Single
Allows one open section.
Allows any number of open sections.
value
string | string[]
—
Controlled open item value; an empty string means none is open.
Controlled list of open item values.
variant
AccordionVariant
AccordionVariant.Default
Visual chrome of every item.
Storybook
Interactive examples and edge cases for this component are in Storybook.