← Design system

Accordion

Interactive examples and usage for the Accordion component.

Examples

Props

PropTypeDefaultDescription
itemsAccordionItem[]requiredArray of accordion items with value, trigger, and content
type'single' | 'multiple''single'Allow one or multiple open panels
defaultValuestring[][]Initially open panel values
valuestring[]undefinedControlled open panels
onValueChange(value: string[]) => voidundefinedCallback when open panels change
variant'default' | 'ghost''default'Visual style variant

Keyboard

KeyAction
Arrow UpMove focus to previous trigger
Arrow DownMove focus to next trigger
HomeMove focus to first trigger
EndMove focus to last trigger
Enter / SpaceToggle the focused panel