Accordion

Expandable sections for FAQs, settings groups, and progressive disclosure. One item open by default, or allow multiple.

Examples

FAQ

You are billed monthly based on active seats. Downgrades take effect at the start of the next cycle.

Overview

Accordion nests items with a header trigger and a collapsible panel. Built on Base UI for keyboard navigation and animated height. Use it when related content should stay off the page until requested.

tsx

import {
  Accordion,
  AccordionItem,
  AccordionHeader,
  AccordionTrigger,
  AccordionPanel,
} from "@standard-ui/react"

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionHeader>
      <AccordionTrigger>Section title</AccordionTrigger>
    </AccordionHeader>
    <AccordionPanel>Hidden until expanded.</AccordionPanel>
  </AccordionItem>
</Accordion>

Usage

Structure

Each item needs a unique value. Wrap the trigger in AccordionHeader, then put body copy in AccordionPanel.

tsx

<AccordionItem value="shipping">
  <AccordionHeader>
    <AccordionTrigger>Shipping</AccordionTrigger>
  </AccordionHeader>
  <AccordionPanel>
    Orders ship within two business days.
  </AccordionPanel>
</AccordionItem>

Multiple open

Pass multiple when several panels can stay open at once. Values are always arrays — even with a single open item.

tsx

<Accordion multiple defaultValue={["a", "b"]}>
  {/* items */}
</Accordion>

API

Parts mirror Base UI Accordion. Root open state uses string arrays; each item needs a unique value.

Part	Role
Accordion	Root state and open control.
AccordionItem	Single section. Requires a unique `value`.
AccordionHeader	Wraps the trigger for heading semantics.
AccordionTrigger	Expands and collapses the panel.
AccordionPanel	Collapsible body content.

Prop	Type	Default	Description
defaultValue	string[]	[]	Uncontrolled initially open item values.
value	string[]	—	Controlled open item values on the root.
onValueChange	(value: string[], event) => void	—	Called when open items change.
multiple	boolean	false	Allow more than one panel open at once.

Guidelines

Do

Use clear, question-style or topic triggers
Keep panel content short — link out for long docs
Prefer defaultValue for the most common answer

Don't

Don't nest interactive forms deep inside every panel by default — consider a dedicated page
Don't use accordion for primary navigation
Don't leave items without a stable value