Accordion

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

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`	—	Classes appended to the root.
`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.

DefaultOpens in a new tab

AccordionItem

Name	Type	Default	Description
`value`	`string`	`required`	Stable id for the item.
`className`	`string`	`—`	Custom classes.
`children`	`ReactNode`	`required`	`AccordionTrigger` and `AccordionContent`.

AccordionTrigger

Name	Type	Default	Description
`className`	`string`	`—`	Custom classes.
`children`	`ReactNode`	`required`	Header label and icons.
`onClick`	`() => void`	`—`	Optional extra click handling.

AccordionContent

Name	Type	Default	Description
`className`	`string`	`—`	Custom classes.
`children`	`ReactNode`	`required`	Expanded body content.

Variants

Default

With the strongest visual structure, this variant offers clear separation with borders and background color.

Ghost

Use for a subtle look with minimal chrome on collapsed items—ideal for reducing visual weight while preserving hierarchy.

Line

Use for text‑forward layouts with simple dividers between item, particularly amidst dense, text‑heavy content.

All variants

Default expanded (single)

Default expanded (multiple)

Types

Single

Use when only one section should be open at a time. Great for FAQs, settings panels, and any context where focus should remain on a single area.

Multiple

Use when users may need to compare or reference several sections at once, such as forms and filters.

Accordion / Usage

Accordion / Accessibility

On this page

Default expanded (single)

Default expanded (multiple)

Types

Single

Multiple

Accordion

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Props

Accordion

Name	Type	Default	Description
`children`	`ReactNode`	—	Compose {@link AccordionItem } children.
`className`	`string`	—	Classes appended to the root.
`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.

DefaultOpens in a new tab

AccordionItem

Name	Type	Default	Description
`value`	`string`	`required`	Stable id for the item.
`className`	`string`	`—`	Custom classes.
`children`	`ReactNode`	`required`	`AccordionTrigger` and `AccordionContent`.

AccordionTrigger

Name	Type	Default	Description
`className`	`string`	`—`	Custom classes.
`children`	`ReactNode`	`required`	Header label and icons.
`onClick`	`() => void`	`—`	Optional extra click handling.

AccordionContent

Name	Type	Default	Description
`className`	`string`	`—`	Custom classes.
`children`	`ReactNode`	`required`	Expanded body content.

Variants

Default

With the strongest visual structure, this variant offers clear separation with borders and background color.

Ghost

Use for a subtle look with minimal chrome on collapsed items—ideal for reducing visual weight while preserving hierarchy.

Line

Use for text‑forward layouts with simple dividers between item, particularly amidst dense, text‑heavy content.

All variants

Default expanded (single)

Default expanded (multiple)

Types

Single

Use when only one section should be open at a time. Great for FAQs, settings panels, and any context where focus should remain on a single area.

Multiple

Use when users may need to compare or reference several sections at once, such as forms and filters.

Accordion / Usage

Accordion / Accessibility

On this page

Default expanded (single)

Default expanded (multiple)

Types

Single

Multiple