Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
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.
Loading example…
Multiple Mode
Multiple items can be open simultaneously. Set
Type to AccordionType.Multiple to enable independent toggling of each AccordionItem.
Loading example…
Controlled
Control the open items externally via
@bind-Value. The Value parameter accepts a HashSet<string> that determines which items are expanded.
Loading example…
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