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.

Controlled State

Control which items are open programmatically using @bind-Value.

Open items:

Single Mode (Collapsible)

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

Multiple Mode

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

This can be open alongside other sections.

Accessibility Features

Built-in accessibility features following WAI-ARIA design patterns.

ARIA Attributes

  • ✓ role="region" on content panels for screen readers
  • ✓ aria-expanded indicates open/closed state
  • ✓ aria-controls links trigger to content
  • ✓ aria-labelledby links content to trigger
  • ✓ aria-disabled on disabled items

Keyboard Shortcuts

Navigate and interact with the accordion using keyboard.

Navigate to triggers Tab
Toggle accordion item
Enter or Space
Navigate between triggers
↑ ↓

API Reference

Component properties and parameters.

Accordion

Type

Type: AccordionType (Single | Multiple)
Default: AccordionType.Single
Determines if one or multiple items can be open at once.

Collapsible

Type: bool
Default: false
When true in Single mode, allows closing all items.

DefaultValue

Type: HashSet<string>
Initial open items (uncontrolled).

Value / ValueChanged

Type: HashSet<string>
Controlled open items. Use with @bind-Value.

AccordionItem

Value

Type: string (required)
Unique identifier for this item.

Disabled

Type: bool
Default: false
Prevents interaction with this item.

AccordionTrigger

ChildContent

Type: RenderFragment
The trigger button content.

AccordionContent

ChildContent

Type: RenderFragment
The panel content.

When to Use Primitives

Choose between primitives and styled components based on your needs.

Use Accordion Primitive

  • ✓ Building a custom design system
  • ✓ Need complete control over styling
  • ✓ Want to apply your own CSS framework
  • ✓ Creating unique visual designs

Use Styled Component

  • ● Want shadcn/ui design out of the box
  • ● Need quick implementation
  • ● Like the default styling
  • ● Prefer convention over configuration
An unhandled error has occurred. Reload 🗙