Accordion

Accordion Primitive

Headless, unstyled accordion primitive with full keyboard navigation and accessibility support.

Basic Headless Primitive

The most basic accordion with no styling. Demonstrates the raw, headless behavior.

Yes. It adheres to the WAI-ARIA design pattern with full keyboard navigation support.

Control which items are open programmatically via two-way binding.

Open items:

In single mode with collapsible enabled, clicking an open item closes it, leaving all items closed.

In multiple mode, multiple items can be open at the same time.

This can be open alongside other sections.

Follows WAI-ARIA patterns: role="region", aria-expanded, aria-controls, aria-labelledby, and aria-disabled are all automatically applied.

Component parameters and their types.

Prop	Type	Default	Description
Type	AccordionType	Single	Whether one or multiple items can be open at once. Options: Single, Multiple.
CollapsiblePrimitive	bool	false	When true in Single mode, allows closing the open item so all are closed.
DefaultValue	HashSet<string>	—	Initial open items (uncontrolled mode).
Value	HashSet<string>	—	Controlled open items. Use with @bind-Value.
ValueChanged	EventCallback	—	Callback invoked when the open items change.
Value (Item)	string	required	On AccordionItemPrimitive: unique identifier for this item.
Disabled	bool	false	On AccordionItemPrimitive: prevents interaction when true.
ChildContent	RenderFragment?	—	Content rendered inside trigger or content primitive.