Accordion
A vertically stacked set of interactive headings that each reveal an associated section of content. Supports single or multiple open items, controlled and uncontrolled modes, and item-level disabling.
Default
Single-select accordion - only one item can be open at a time.
Yes. It adheres to the WAI-ARIA design pattern with proper keyboard navigation and ARIA attributes.
Yes. It comes with default styles that match the design system tokens.
Yes. It uses CSS transitions for smooth height animations when expanding and collapsing.
Multiple
Multiple items can be open simultaneously with type="multiple".
This section and the next are both open by default.
Multiple sections can be expanded at the same time.
Click to expand this one as well.
Disabled
Individual items can be disabled to prevent interaction.
This item can be toggled.
This content is not reachable.
This item can also be toggled.
Controlled
Manage the open state externally with value and onValueChange.
Open: item-1
Content for item 1.
Content for item 2.