Accordion
Accessible React accordion built on Radix with single or multiple open sections, collapsible mode, sizes, icon alignment, and a flush style. RTL ready.
Accordion groups content into expandable sections. Use type="single" to open one at a time, or type="multiple" to keep several open.
When to use
Use Accordion for FAQs, requirement lists, and long forms that users scan section by section. Use type="single" when one open section keeps the page short, and type="multiple" when users compare sections.
If every section must be read, use headings and plain content instead. For a single show-hide region, use Collapsible.
Examples
Props
Props declared by Accordion. Native attributes of the underlying element pass through.
<Accordion>
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | ||
iconAlign | "trailing" | "leading" | ||
flush | boolean | ||
typerequired | "single" | ||
value | string | The controlled stateful value of the accordion item whose content is expanded. | |
defaultValue | string | The value of the item whose content is expanded when the accordion is initially rendered. Use
defaultValue if you do not need to control the state of an accordion. | |
onValueChange | (value: string) => void | The callback that fires when the state of the accordion changes. | |
collapsible | boolean | false | Whether an accordion item can be collapsed after it has been opened. |
disabled | boolean | false | Whether or not an accordion is disabled from user interaction. |
orientation | "vertical" | "horizontal" | vertical | The layout in which the Accordion operates. |
dir | Direction | The language read direction. | |
asChild | boolean |
<AccordionItem>
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Whether or not an accordion item is disabled from user interaction. |
valuerequired | string | A string value for the accordion item. All items within an accordion should use a unique value. | |
asChild | boolean |
<AccordionContent>
| Prop | Type | Default | Description |
|---|---|---|---|
forceMount | true | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | |
asChild | boolean |
Accessibility
Each trigger is a button with aria-expanded and aria-controls, and each panel is a region named by its trigger. The arrow keys move between triggers and Home and End jump to the first and last.
Headings inside triggers keep the document outline usable. The chevron is decorative and flips with the open state.