Accordion

Foundations · Accordion, Badge, Panel

Stacked sections that open and close. One section at a time by default, or several with multiple.

cards (default) shows each section as a card; flush uses hairlines, for use inside a panel.
Keyboard: Tab reaches each header, ↑/↓ move between headers, Home/End jump, Enter or Space toggles.
Headers are buttons with aria-expanded; panels are regions labelled by their header.

PreviewCode

You pay per seat and month. Seats added mid-cycle are prorated to the next invoice.

Settings

Approvals and overdue invoices reach you by mail and push.

Workspace data stays in the EU region.

Prop	Type	Notes
`items`	`AccordionItem[]`	Required
`multiple?`	`boolean`	Several sections open at once (default: one at a time).
`value?`	`string[]`	Open section ids (controlled).
`defaultValue?`	`string[]`
`onChange?`	`(open: string[]) => void`
`variant?`	`"cards" \| "flush"`	`cards`: each section is a card; `flush`: hairlines only (inside a panel).
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`tone?`	`Tone`
`dot?`	`boolean`
`live?`	`boolean`
`children?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`side?`	`boolean`
`title?`	`string`
`subtitle?`	`string`
`action?`	`ReactNode`
`children?`	`ReactNode`
`surface?`	`Surface`	`"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`.
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.