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 This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | 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 | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
AccordionItem
Individual accordion item container This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
value | string | — | Unique value for this accordion item |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
AccordionTrigger
Clickable trigger that expands/collapses the content This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Trigger content (typically text) |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
AccordionContent
Collapsible content section This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content to display when expanded |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
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.