Accordion

uistable

Accordion — from shadcn/ui (radix-nova style).

npx shadcn add @krawma/accordion

npm: lucide-react@^1.22.0, radix-ui@^1.6.1 · registry: @krawma/utils

Preview

States

opencloseddisabledfocus-visible

Keyboard

EnterSpaceArrowDownArrowUpHomeEnd

Depends on

utils

Purpose

Vertically stacked, collapsible sections that let users reveal one (or several) regions of content at a time — FAQs, settings groups, disclosure lists.

Anatomy

Accordion (type="single" | "multiple", optional collapsible) › one AccordionItem per section › AccordionTrigger (the header) + AccordionContent.

Style

No variants — token-backed rows with a rotating chevron. Content is unmounted when collapsed.

Behavior & functionality

type="single" shows one open section (add collapsible to allow all-closed); type="multiple" allows several.
Controlled (value/onValueChange) or uncontrolled (defaultValue).

Accessibility

Triggers are buttons inside headers; Enter/Space toggle, Up/Down move between triggers, Home/End jump. Disabled items are skipped.
Content region is associated with its trigger via ARIA.

Do / Don't

✅ Use type="single" collapsible for FAQ-style disclosure.
❌ Don't nest interactive-heavy forms so deep that collapsing hides validation.