Accordion

Accordion is a compound component for grouped expandable sections that share one root state model and item-level parts for headers, triggers, icons, and content.

Storybook Source Figma

Root Props

Prop	Type	Default
`className`	`string`	—
Optional custom CSS class to apply to the accordion wrapper. Useful for styling overrides or scoped custom styling.
`size`	`AccordionSize`	`'md'`
Defines the size of the accordion. Affects padding and font size.
`children`	`ReactElement<AccordionItemProps> \| ReactElement<AccordionItemProps>[]`	—
Accordion items to render. Should be one or more `<AccordionItem>` components. Accepts a single element or an array of elements.
`opened`	`string[]`	—
IDs of currently open items. Enables controlled mode when set.
`onChangeOpened`	`(opened?: string[]) => void`	—
Called when open item IDs change.
`defaultOpened`	`string[]`	`[]`
An array of item `id's that should be open by default when the accordion mounts.`
`multiple`	`boolean`	`false`
Allows multiple accordion items to be open at the same time. If `false`, only one item can be open at once (classic accordion behavior).

Also accepts all <ul> attributes.

Child Parts

AccordionItem: one expandable item with a stable value.
AccordionHeader: semantic header wrapper for each item.
AccordionTrigger: toggle button for the item.
AccordionContent: expandable content region.
AccordionIcon: optional visual state indicator.

`AccordionItem`

Prop	Type	Default
`open`	`boolean`	—
Controls whether the accordion item is open (expanded). If provided, the component becomes controlled.
`onChangeOpen`	`(value: string, state: boolean) => void`	—
Callback triggered when the open state changes.
`value`required	`string`	—
Unique identifier for this accordion item. Used for managing open state within the accordion group.
`size`	`AccordionSize`	—
Controls the size of the trigger and affects typography and spacing. Falls back to context value if not provided.
`contentId`	`string`	—
ID of the collapsible content element. Used to: link trigger and content via accessibility attributes (`aria-controls`); expose the expanded region to assistive technologies; provide a stable identifier for testing and DOM querying. If not provided, an ID generated internally.

Also accepts all <li> attributes.

`AccordionTrigger`

Prop	Type	Default
`asChild`	`boolean`	—
If true, renders the trigger as a child component using `Slot` (e.g. `<a>` or `<div>`). This allows custom semantics or styling while preserving collapsible behavior.
`ref`	`Ref<HTMLButtonElement>`	—
Ref forwarded to the native trigger element (typically a button).

Also accepts all HTML attributes.

`AccordionContent`

Prop	Type	Default
`ref`	`Ref<HTMLDivElement>`	—
Ref to the root content div element.

Also accepts all <div> attributes.

`AccordionHeader`

Prop	Type	Default
`as`	`HeadingAs`	—
The HTML heading tag to render (e.g., 'h1', 'h2'). Defines semantic structure and accessibility level.
`size`	`HeadingSize`	—
Visual size of the heading, independent of the `as` tag. Typically mapped to a design system's type scale. Accepts values from 1 (smallest) to 11 (largest).
`fontWeight`	`400 \| 500 \| 600 \| 700 \| 900`	—
Font weight of the heading text. 400: Regular; 500: Medium; 600: Semi-bold; 700: Bold; 900: Extra bold
`ref`	`Ref<HTMLHeadingElement>`	—
Ref to the native HTML heading element. Useful for DOM access or focus management.

Also accepts all <h1>–<h6> attributes.

`AccordionIcon`

Prop	Type	Default
`size`	`IconSize`	—
Predefined size token for the icon. Can be overridden by explicit width and height.
`ref`	`Ref<SVGSVGElement>`	—
Ref to the SVG element
`strokeWidth`	`number`	—
Stroke thickness for SVG lines and shapes (in px or pt).
`children`	`ReactNode`	—
Icon content (required). Accepts: icons from `~/icons`; custom inline SVG; third-party icon components (e.g. Lucide, Tabler)

Also accepts all HTML attributes.

Types

AccordionProps
AccordionItemProps
AccordionHeaderProps
AccordionTriggerProps
AccordionContentProps
AccordionIconProps

State Model

Accordion can be uncontrolled through defaultOpened or controlled through opened and onChangeOpened.
multiple={false} behaves like a classic accordion where opening one item closes the others.
multiple={true} allows the root to behave like a grouped disclosure surface.
useAccordionContext and useAccordionItemContext are available for advanced wrappers and custom compositions.