Accordion
A headless accordion primitive with single or multiple expansion modes and full keyboard navigation.
Single Mode
Only one item can be open at a time. Set
Type to AccordionType.Single and enable Collapsible to allow closing all items.Multiple Mode
Multiple items can be open simultaneously. Set
Type to AccordionType.Multiple to enable independent toggling of each AccordionItem.Controlled
Control the open items externally via
@bind-Value. The Value parameter accepts a HashSet<string> that determines which items are expanded.Anatomy
Loading example…
Data Attributes
Use these data attributes for CSS styling:
[data-state="open"]- When the item is expanded[data-state="closed"]- When the item is collapsed[data-disabled]- When the item is disabled