Accordion
A vertically stacked set of interactive headings that reveal or hide content.
Installation
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "@gradeui/ui"Usage
Examples
FAQ
Multiple Open
Default Open
This item is open when the page loads.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Whether one or multiple items can be opened at once. |
| value | string | string[] | - | The controlled value of the opened item(s). |
| defaultValue | string | string[] | - | The default opened item(s) when uncontrolled. |
| collapsible | boolean | false | When type is 'single', allows closing all items. |
Accessibility
- Built on Radix UI Accordion for full accessibility
- Keyboard navigation (Arrow keys, Home, End)
- WAI-ARIA accordion pattern
- Proper focus management
Sidecar
The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/accordion.md and shipped inside the published @gradeui/ui tarball.
---
name: Accordion
import: "@gradeui/ui"
subcomponents: [AccordionItem, AccordionTrigger, AccordionContent]
props:
- Accordion: type: "single" | "multiple" — single keeps one open at a time, multiple lets several be open at once
- Accordion: collapsible?: boolean — only valid with type="single"; allows the open item to be toggled shut
- Accordion: defaultValue?: string | string[] — initial open item(s)
- Accordion: value?: string | string[] — controlled
- Accordion: onValueChange?: (value: string | string[]) => void
- AccordionItem: value: string — id used by the open-state machinery
- AccordionTrigger: children: React.ReactNode — the row label users click to expand
- AccordionContent: children: React.ReactNode — the body that animates in
when_to_use: Long-form content that would overwhelm if shown all at once — FAQs, settings groups, "what's included" sections, nested help. For tab-style peer views with one always visible, reach for Tabs. For a single show/hide reveal use Collapsible.
composes_with: [Card (as a faq inside a card body), Section primitives]
aliases: [accordion, faq, expand, collapse list, disclosure list, disclosure group, outline group, expandable list, sectionlist]
---
```jsx
<Accordion type="single" collapsible defaultValue="one">
<AccordionItem value="one">
<AccordionTrigger>What's included?</AccordionTrigger>
<AccordionContent>Everything in the design system, plus Studio.</AccordionContent>
</AccordionItem>
<AccordionItem value="two">
<AccordionTrigger>Can I bring my own theme?</AccordionTrigger>
<AccordionContent>Yes — three hues in, full theme out.</AccordionContent>
</AccordionItem>
</Accordion>
```