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.

Variants

Sizes

Expand Mode

Radix

Base

Playground

Preview

A design system is a collection of reusable components and guidelines for building consistent user interfaces.

Variant

Size

Type

Options

<Accordion defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>What is a design system?</Accordion.Trigger>
    <Accordion.Content>A design system is a collection of reusable components and guidelines for building consistent user interfaces.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>How to install?</Accordion.Trigger>
    <Accordion.Content>Install the package using npm or yarn, then import components as needed.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>Yes, all components follow WAI-ARIA guidelines with full keyboard navigation support.</Accordion.Content>
  </Accordion.Item>
</Accordion>

Variants

default

Content for item 1

<Accordion defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Item 1</Accordion.Trigger>
    <Accordion.Content>Content for item 1</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Item 2</Accordion.Trigger>
    <Accordion.Content>Content for item 2</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Item 3</Accordion.Trigger>
    <Accordion.Content>Content for item 3</Accordion.Content>
  </Accordion.Item>
</Accordion>

bordered

Content for item 1

<Accordion variant="bordered" defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Item 1</Accordion.Trigger>
    <Accordion.Content>Content for item 1</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Item 2</Accordion.Trigger>
    <Accordion.Content>Content for item 2</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Item 3</Accordion.Trigger>
    <Accordion.Content>Content for item 3</Accordion.Content>
  </Accordion.Item>
</Accordion>

splitted

Content for item 1

<Accordion variant="splitted" defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Item 1</Accordion.Trigger>
    <Accordion.Content>Content for item 1</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Item 2</Accordion.Trigger>
    <Accordion.Content>Content for item 2</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Item 3</Accordion.Trigger>
    <Accordion.Content>Content for item 3</Accordion.Content>
  </Accordion.Item>
</Accordion>

Sizes

sm

Padding12px 16px

Font13px

default

Padding16px 16px

Font14px

lg

Padding20px 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">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Single 1</Accordion.Trigger>
    <Accordion.Content>Only one open at a time</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Single 2</Accordion.Trigger>
    <Accordion.Content>Previous item closes automatically</Accordion.Content>
  </Accordion.Item>
</Accordion>

Multiple

Multiple items can be open

All items open independently

<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Multiple 1</Accordion.Trigger>
    <Accordion.Content>Multiple items can be open</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Multiple 2</Accordion.Trigger>
    <Accordion.Content>All items open independently</Accordion.Content>
  </Accordion.Item>
</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">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Always one open</Accordion.Trigger>
    <Accordion.Content>This accordion always keeps one item open.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Try closing me</Accordion.Trigger>
    <Accordion.Content>You cannot close all items.</Accordion.Content>
  </Accordion.Item>
</Accordion>

Icon Position

Right (default)

Icon on the right side

<Accordion defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Right icon (default)</Accordion.Trigger>
    <Accordion.Content>Icon on the right side</Accordion.Content>
  </Accordion.Item>
</Accordion>

Left

Icon on the left side

<Accordion iconPosition="left" defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Left icon</Accordion.Trigger>
    <Accordion.Content>Icon on the left side</Accordion.Content>
  </Accordion.Item>
</Accordion>

Disabled

This item is active

<Accordion defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Active item</Accordion.Trigger>
    <Accordion.Content>This item is active</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2" disabled>
    <Accordion.Trigger>Disabled item</Accordion.Trigger>
    <Accordion.Content>This item is disabled</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Active item</Accordion.Trigger>
    <Accordion.Content>This item is also active</Accordion.Content>
  </Accordion.Item>
</Accordion>

API

Component Structure

Accordion— Radix Accordion

.ItemProps.TriggerProps.Content

.ItemPropsAccordion item

.TriggerPropsTrigger — supports icon prop

.ContentContent area — with animation

Props

Accordion (Root)

type"single"

"single" | "multiple"

Expand mode — single allows one open, multiple allows several

collapsibletrue

boolean

Allow 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

defaultValueundefined

string | string[]

Default expanded item (uncontrolled)

valueundefined

string | string[]

Expanded item (controlled)

onValueChangeundefined

(value: string | string[]) => void

Callback fired on expand state change

disabledundefined

boolean

Disable 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

Accordion.Item

value—

string

Unique identifier for the item (required)

disabledundefined

boolean

Disable this item

Name	Type	Default	Description
`value`	`string`	`—`	Unique identifier for the item (required)
`disabled`	`boolean`	`undefined`	Disable this item

Accordion.Trigger

iconbuilt-in SVG (ChevronDown)

ReactNode

Custom indicator icon

Name	Type	Default	Description
`icon`	`ReactNode`	`built-in SVG (ChevronDown)`	Custom indicator icon

Customization

The icon prop on Accordion.Trigger 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'

<Accordion.Trigger
  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
</Accordion.Trigger>

ChevronRight (90° rotation)

Follow the installation guide to begin.

import { ChevronRight } from 'lucide-react'

<Accordion.Trigger
  icon={
    <ChevronRight className="icon-sm shrink-0 text-text-muted
      transition-transform duration-normal accordion-chevron" />
  }
>
  Item text
</Accordion.Trigger>

Tip: Add the accordion-chevron class to a custom icon to apply the same 180° rotation animation as the built-in icon.

Anatomy

Frequently asked questions

Pricing plans

Trigger padding16px

Content padding0 16px 16px

Iconicon-sm

Root

Root container

Item

Collapsible section

Trigger

Header button

Chevron

Open/close icon

Content

Expanded content

Best Practices

✓

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

Accordion

Playground

What is a design system?

How to install?

Is it accessible?

Variants

default

Item 1

Item 2

Item 3

bordered

Item 1

Item 2

Item 3

splitted

Item 1

Item 2

Item 3

Sizes

Item A

Item B

Item A

Item B

Item A

Item B

Features

Expand Mode

Single 1

Single 2

Multiple 1

Multiple 2

Collapsible

Always one open

Try closing me

Icon Position

Right icon (default)

Left icon

Disabled

Active item

Disabled item

Active item

API

Component Structure

Props

Accordion (Root)

Accordion.Item

Accordion.Trigger

Customization

Plus / Minus Icons

What is your return policy?

Do you offer free shipping?

ChevronRight (90° rotation)

Getting Started

Configuration

Anatomy

Best Practices

Recommended

Don't

Accessibility

Keyboard

ARIA / WCAG

Related

Tabs

Card

Dropdown