Data display
Accordion
Stacked sections that expand and collapse, built on Radix Accordion, for FAQs and long settings pages.
- Source
- src/components/ui/accordion.tsx
- Figma
- Accordion · state (closed, open) × leading (none, icon).
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";When to use
- FAQs and help content where people scan questions and open one or two.
- Long forms or settings split into sections that do not all need to be visible.
- When people need to compare sections side by side, use Tabs or show everything.
- Do not hide critical information, such as errors, inside a collapsed section.
Examples
Multiple open
type="multiple" lets several items stay open. defaultValue takes an array.
With leading icons
Wrap the icon and title in a flex span so the chevron stays on the right.
In a card
A help panel: the accordion sits inside CardContent, with a footer link to support.
API reference
Accordion
Radix Accordion.Root. Accepts every Root prop.
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | - | Required. single: one item open at a time. multiple: any number open. |
| collapsible | boolean | false | type="single" only. Lets the open item be closed again. |
| defaultValue | string | string[] | - | Item value(s) open on first render (uncontrolled). A string for single, an array for multiple. |
| value | string | string[] | - | Open item value(s), controlled. |
| onValueChange | (value: string | string[]) => void | - | Called when items open or close. Receives a string for single, an array for multiple. |
| disabled | boolean | false | Disables every item. |
AccordionItem
Radix Accordion.Item, with a bottom border on every item but the last.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | Required. Unique id used by value and defaultValue. |
| disabled | boolean | false | Stops this item from opening or closing. |
AccordionTrigger
Radix Accordion.Trigger inside an Accordion.Header (an <h3>). Shows a chevron that flips when open. Extends native button attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The section title. For a leading icon, wrap the icon and text in a span with flex and a gap. |
AccordionContent
Radix Accordion.Content with open and close height animations.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Applied to the inner padded div, not the animated Content element. |
| forceMount | true | - | Keeps the content mounted while closed, for example for find-in-page or animation libraries. |
Accessibility
- Each trigger is a button inside an <h3>, with aria-expanded and aria-controls managed by Radix.
- Open content is a region labelled by its trigger.
- Enter and Space toggle the focused item; Arrow Down and Arrow Up move between triggers, and Home and End jump to the first and last.
- Disabled items cannot be toggled and are skipped by arrow key navigation.