Accordion
An accordion component for displaying collapsible content sections. Built on Radix UI primitives with customizable alignment and animations. Perfect for FAQs, content organization, and progressive disclosure.
Installation
Import
Usage
Use Accordion for organizing content into collapsible sections. Choose 'single' type for exclusive expansion or 'multiple' for independent sections. Use collapsible with single type to allow closing. Align chevron based on your design. Keep trigger text concise and descriptive.
Design Guidelines
Maintain consistent accordion styling throughout your application. Use appropriate spacing between items. Keep trigger text concise. Align chevron consistently. Provide smooth animations. Use accordions for progressive disclosure of content.
Basic Usage
Simple accordion with multiple items
Multiple Open
Accordion allowing multiple items open at once
Left Aligned
Accordion with left-aligned chevron
FAQ Example
Accordion used for FAQ section
Accordion
Root accordion component that manages accordion state packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
type | "single" | "multiple" | "single" | Whether only one or multiple items can be open at once |
collapsible | boolean | — | When type="single", allows closing the open item |
value | string | string[] | — | Controlled value(s) of open items |
defaultValue | string | string[] | — | Uncontrolled default value(s) of open items |
onValueChange | (value: string | string[]) => void | — | Callback fired when value changes |
align | "left" | "right" | "right" | Alignment of the chevron icon |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
AccordionItem
Individual accordion item container packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
value | string | — | Unique value for this accordion item |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
AccordionTrigger
Clickable trigger that expands/collapses the content packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
children | React.ReactNode | — | Trigger content (typically text) |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
AccordionContent
Collapsible content section packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
children | React.ReactNode | — | Content to display when expanded |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
Accessibility
Accessibility features and considerations
Accordion includes proper ARIA attributes and keyboard navigation. Arrow keys navigate between items. Enter or Space toggles items. Screen readers announce expanded/collapsed state. Ensure trigger text is descriptive. Use appropriate heading levels if needed.