Hex UIv0.1

Accordion

A vertically stacked set of collapsible content sections. Built on Radix UI Accordion.

Single-mode FAQ (one open at a time)

Multi-mode (any subset open)

Orders ship within 2 business days. Free delivery on orders over $50.

30-day no-questions-asked returns. We cover the return shipping.

Installation

pnpm
pnpm dlx @hex-core/cli add accordion

API Reference

PropTypeDefaultDescription
typerequired
"single" | "multiple"—Single allows one item open at a time, multiple allows many
defaultValue
string—Default open item(s): string for type='single', string[] for type='multiple'
value
string—Controlled open item(s): string for type='single', string[] for type='multiple'
onValueChange
function—Callback when open items change: (value: string) => void for single, (value: string[]) => void for multiple
collapsible
booleanfalseAllow all items to be closed (type='single' only)
className
string—Additional CSS classes

AI Guidance

When to use

Use for FAQ sections, settings groups, or any content that benefits from progressive disclosure. Use type='single' for FAQs, type='multiple' for settings.

When not to use

Don't use for navigation (use tabs). Don't use for a single collapsible (use Collapsible).

Common mistakes

  • Forgetting type prop (it's required)
  • Not setting collapsible=true for single type when all items should be closeable
  • Missing value on AccordionItem

Accessibility

Full keyboard navigation (arrow keys, Home, End, Enter/Space). Radix handles aria-expanded, aria-controls, role='region'.

Related components

Token budget: 400

Edit this page on GitHub