Chapter 9: Accordion

Core Idea

A vertically (or horizontally) stacked set of interactive headings that each reveal an associated content panel, supporting single- or multi-item expansion.

Key Concepts

• Anatomy: Root → Item → Header (wraps Trigger) → Content.
• type prop ("single" | "multiple"): controls whether one or many items can be open at once.
• collapsible: when true and type="single", allows the currently open item to close, leaving none open.
• --radix-accordion-content-width/--radix-accordion-content-height: CSS variables exposing measured content size, used to animate open/close height without height: auto limitations.

Code Examples

import { Accordion } from "radix-ui";

export default () => (
  <Accordion.Root type="single" collapsible>
    <Accordion.Item value="item-1">
      <Accordion.Header>
        <Accordion.Trigger>Trigger text</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content>…</Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);

• What it demonstrates: minimal single-collapsible accordion — the most common configuration.

Reference Tables

Part	Key props	Key data attributes
Root	type*, value/defaultValue, collapsible, disabled, dir, orientation	[data-orientation]
Item	value*, disabled	[data-state], [data-disabled], [data-orientation]
Header	asChild (use to set correct heading level, e.g. h3)	[data-state], [data-orientation]
Trigger	asChild	[data-state], [data-disabled], [data-orientation]
Content	forceMount	[data-state], [data-orientation]

Key Takeaways

1. Use Header's asChild to render the correct semantic heading level (h2/h3/etc.) for the page — Radix doesn't assume one.
2. Animate open/close height with the --radix-accordion-content-* CSS variables instead of max-height hacks or JS measurement.
3. Full keyboard support (arrow keys to move between triggers, Home/End to jump to first/last) is built in — respects orientation.

Connects To

• Collapsible: the single-item primitive Accordion effectively generalizes to multiple coordinated items.
• Animation: the content-size CSS variables pattern shown here is the standard way to animate any Radix collapsible content.