Hex UIv1

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

FAQ section

Four-question FAQ with one open at a time and full collapse allowed

tsx
<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="shipping">
    <AccordionTrigger>How long does shipping take?</AccordionTrigger>
    <AccordionContent>
      Orders ship within 24 hours and arrive in 3–5 business days within the US,
      7–14 days internationally. Tracking is emailed when the label is created.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="returns">
    <AccordionTrigger>What is your return policy?</AccordionTrigger>
    <AccordionContent>
      Unworn items can be returned for a full refund within 30 days. Start a return
      from your order page — we cover return shipping for defective items.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="sizing">
    <AccordionTrigger>How do I find my size?</AccordionTrigger>
    <AccordionContent>
      Each product page links to a size chart with body and garment measurements.
      When in doubt, size up — most items run slim.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="contact">
    <AccordionTrigger>How do I contact support?</AccordionTrigger>
    <AccordionContent>
      Email support@example.com or use the chat widget — we reply within one
      business day.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Multiple-open with default

type='multiple' with two items expanded on first render

tsx
<Accordion type="multiple" defaultValue={["item-1", "item-3"]} className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Notifications</AccordionTrigger>
    <AccordionContent>Email and push notification preferences.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Privacy</AccordionTrigger>
    <AccordionContent>Profile visibility and data-sharing controls.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Billing</AccordionTrigger>
    <AccordionContent>Plan, payment method, and invoice history.</AccordionContent>
  </AccordionItem>
</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

Verified against @hex-core/components@1.12.0

Edit this page on GitHub