Accordion
Accordion splits content into collapsible panels. Three variants and three sizes cover FAQ sections, help pages, and a wide range of other use cases.
3
Variants
3
Sizes
2
Expand Mode
Radix
Base
Playground
Preview
D
A design system is a collection of reusable components and guidelines for building consistent user interfaces.
Variant
Size
Type
Options
<Accordion defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>What is a design system?</AccordionTrigger>
<AccordionContent>A design system is a collection of reusable components and guidelines for building consistent user interfaces.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>How to install?</AccordionTrigger>
<AccordionContent>Install the package using npm or yarn, then import components as needed.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>Yes, all components follow WAI-ARIA guidelines with full keyboard navigation support.</AccordionContent>
</AccordionItem>
</Accordion>Variants
default
Content for item 1
<Accordion defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Item 1</AccordionTrigger>
<AccordionContent>Content for item 1</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Item 2</AccordionTrigger>
<AccordionContent>Content for item 2</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Item 3</AccordionTrigger>
<AccordionContent>Content for item 3</AccordionContent>
</AccordionItem>
</Accordion>bordered
Content for item 1
<Accordion variant="bordered" defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Item 1</AccordionTrigger>
<AccordionContent>Content for item 1</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Item 2</AccordionTrigger>
<AccordionContent>Content for item 2</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Item 3</AccordionTrigger>
<AccordionContent>Content for item 3</AccordionContent>
</AccordionItem>
</Accordion>splitted
Content for item 1
<Accordion variant="splitted" defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Item 1</AccordionTrigger>
<AccordionContent>Content for item 1</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Item 2</AccordionTrigger>
<AccordionContent>Content for item 2</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Item 3</AccordionTrigger>
<AccordionContent>Content for item 3</AccordionContent>
</AccordionItem>
</Accordion>Sizes
smPadding12px 16px
Font13px
defaultPadding16px 16px
Font14px
lgPadding20px 24px
Font16px
| Size | Padding (trigger) | Font | Preview |
|---|---|---|---|
sm | 12px 16px | 13px (text-sm) | Content A |
default | 16px 16px | 14px (text-md) | Content A |
lg | 20px 24px | 16px (text-base) | Content A |
Features
Expand Mode
single allows one item open at a time. multiple allows several items open simultaneously.
Single (default)
Only one open at a time
<Accordion defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Single 1</AccordionTrigger>
<AccordionContent>Only one open at a time</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Single 2</AccordionTrigger>
<AccordionContent>Previous item closes automatically</AccordionContent>
</AccordionItem>
</Accordion>Multiple
Multiple items can be open
All items open independently
<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
<AccordionItem value="item-1">
<AccordionTrigger>Multiple 1</AccordionTrigger>
<AccordionContent>Multiple items can be open</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Multiple 2</AccordionTrigger>
<AccordionContent>All items open independently</AccordionContent>
</AccordionItem>
</Accordion>Collapsible
When collapsible is true (default), clicking an open item closes it. Set to false to always keep one item expanded.
This accordion always keeps one item open.
<Accordion collapsible={false} defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Always one open</AccordionTrigger>
<AccordionContent>This accordion always keeps one item open.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Try closing me</AccordionTrigger>
<AccordionContent>You cannot close all items.</AccordionContent>
</AccordionItem>
</Accordion>Icon Position
Right (default)
Icon on the right side
<Accordion defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Right icon (default)</AccordionTrigger>
<AccordionContent>Icon on the right side</AccordionContent>
</AccordionItem>
</Accordion>Left
Icon on the left side
<Accordion iconPosition="left" defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Left icon</AccordionTrigger>
<AccordionContent>Icon on the left side</AccordionContent>
</AccordionItem>
</Accordion>Disabled
This item is active
<Accordion defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Active item</AccordionTrigger>
<AccordionContent>This item is active</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2" disabled>
<AccordionTrigger>Disabled item</AccordionTrigger>
<AccordionContent>This item is disabled</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Active item</AccordionTrigger>
<AccordionContent>This item is also active</AccordionContent>
</AccordionItem>
</Accordion>API
Component Structure
Accordion— Radix Accordion.ItemProps.TriggerProps.Content
.ItemPropsAccordion item.TriggerPropsTrigger — supports icon prop.ContentContent area — with animationProps
Accordion (Root)
type"single""single" | "multiple"Expand mode — single allows one open, multiple allows several
collapsibletruebooleanAllow all items to be closed (single mode only)
variant"default""default" | "bordered" | "splitted"Visual style
size"default""sm" | "default" | "lg"Size of trigger and content
iconPosition"right""left" | "right"Position of the indicator icon
defaultValueundefinedstring | string[]Default expanded item (uncontrolled)
valueundefinedstring | string[]Expanded item (controlled)
onValueChangeundefined(value: string | string[]) => voidCallback fired on expand state change
disabledundefinedbooleanDisable all items
| Name | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | "single" | Expand mode — single allows one open, multiple allows several |
collapsible | boolean | true | Allow all items to be closed (single mode only) |
variant | "default" | "bordered" | "splitted" | "default" | Visual style |
size | "sm" | "default" | "lg" | "default" | Size of trigger and content |
iconPosition | "left" | "right" | "right" | Position of the indicator icon |
defaultValue | string | string[] | undefined | Default expanded item (uncontrolled) |
value | string | string[] | undefined | Expanded item (controlled) |
onValueChange | (value: string | string[]) => void | undefined | Callback fired on expand state change |
disabled | boolean | undefined | Disable all items |
AccordionItem
value—stringUnique identifier for the item (required)
disabledundefinedbooleanDisable this item
| Name | Type | Default | Description |
|---|---|---|---|
value | string | — | Unique identifier for the item (required) |
disabled | boolean | undefined | Disable this item |
AccordionTrigger
iconbuilt-in SVG (ChevronDown)ReactNodeCustom indicator icon
| Name | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | built-in SVG (ChevronDown) | Custom indicator icon |
Customization
The icon prop on AccordionTrigger lets you replace the indicator icon freely.
Plus / Minus Icons
You can return any item within 30 days of purchase.
import { Plus, Minus } from 'lucide-react'
<AccordionTrigger
icon={
<>
<Plus className="icon-sm shrink-0 text-text-muted
group-data-[state=open]:hidden" />
<Minus className="icon-sm shrink-0 text-text-muted
hidden group-data-[state=open]:block" />
</>
}
>
Question text
</AccordionTrigger>ChevronRight (90° rotation)
Follow the installation guide to begin.
import { ChevronRight } from 'lucide-react'
<AccordionTrigger
icon={
<ChevronRight className="icon-sm shrink-0 text-text-muted
transition-transform duration-normal accordion-chevron" />
}
>
Item text
</AccordionTrigger>Tip: Add the accordion-chevron class to a custom icon to apply the same 180° rotation animation as the built-in icon.
Anatomy
1
2
3
Frequently asked questions4
5
Pricing plans
Trigger padding
16pxContent padding
0 16px 16pxIcon
icon-sm1
Root
Root container
2
Item
Collapsible section
3
Trigger
Header button
4
Chevron
Open/close icon
5
Content
Expanded content
Best Practices
✓
Do
- ✓Use for FAQ and help sections
- ✓Group related content together
- ✓Pre-expand the most important item by default
- ✓Keep labels concise and predictive of content
✕
Don't
- ✗Don't nest accordions inside accordions
- ✗Don't hide critical information that must always be visible
- ✗Don't use too many items — seven or fewer is recommended
- ✗Don't add unnecessary collapsing for short content
Accessibility
Keyboard
Enter / SpaceToggle focused item open/closed
TabMove to next focusable element
Arrow DownFocus next trigger
Arrow UpFocus previous trigger
HomeFocus first trigger
EndFocus last trigger
ARIA / WCAG
- role="region" on content with aria-labelledby
- aria-expanded reflects trigger state automatically
- aria-controls links trigger to content
- Disabled items are skipped in keyboard navigation