Skip to main content

​
Overview

Accordion is a vertically stacked set of interactive headings that each reveal a section of content. It’s built on top of the Collapsible primitive.

​
Features

  • Full keyboard navigation
  • Supports horizontal and vertical orientation
  • Can expand one or multiple items at a time
  • Can be controlled or uncontrolled
  • Collapsible items can optionally be disabled

​
Installation

npm install @radix-ui/react-accordion

​
Anatomy

import * as Accordion from '@radix-ui/react-accordion';

export default () => (
  <Accordion.Root>
    <Accordion.Item>
      <Accordion.Header>
        <Accordion.Trigger />
      </Accordion.Header>
      <Accordion.Content />
    </Accordion.Item>
  </Accordion.Root>
)

​
API Reference

​
Root

Contains all the parts of an accordion.
​
type
'single' | 'multiple'
required
Determines whether one or multiple items can be opened at the same time.
​
value
string
The controlled value of the item to expand when type is "single". Must be used in conjunction with onValueChange.
​
defaultValue
string
The value of the item to expand when initially rendered and type is "single". Use when you do not need to control the state.
​
onValueChange
(value: string) => void
Event handler called when the expanded state changes and type is "single".
​
value
string[]
The controlled value of the items to expand when type is "multiple". Must be used in conjunction with onValueChange.
​
defaultValue
string[]
The value of the items to expand when initially rendered and type is "multiple". Use when you do not need to control the state.
​
onValueChange
(value: string[]) => void
Event handler called when the expanded state changes and type is "multiple".
​
collapsible
boolean
default:"false"
When type is "single", allows closing content when clicking trigger for an open item.
​
disabled
boolean
default:"false"
When true, prevents the user from interacting with the accordion and all its items.
​
orientation
'vertical' | 'horizontal'
default:"'vertical'"
The orientation of the accordion.
​
dir
'ltr' | 'rtl'
The reading direction of the accordion. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.

​
Item

Contains all the parts of a collapsible section.
​
value
string
required
A unique value for the item.
​
disabled
boolean
default:"false"
When true, prevents the user from interacting with the item.

​
Header

Wraps an Accordion.Trigger. Use the asChild prop to customize the element.

​
Trigger

Toggles the collapsed state of its associated item. It should be nested inside an Accordion.Header.

​
Content

Contains the collapsible content for an item.
​
forceMount
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

​
Examples

​
Single Item

import * as Accordion from '@radix-ui/react-accordion';

export default () => (
  <Accordion.Root type="single" defaultValue="item-1" collapsible>
    <Accordion.Item value="item-1">
      <Accordion.Header>
        <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content>
        Yes. It adheres to the WAI-ARIA design pattern.
      </Accordion.Content>
    </Accordion.Item>

    <Accordion.Item value="item-2">
      <Accordion.Header>
        <Accordion.Trigger>Is it styled?</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content>
        No. It's unstyled by default, giving you freedom over styling.
      </Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);

​
Multiple Items

import * as Accordion from '@radix-ui/react-accordion';

export default () => (
  <Accordion.Root type="multiple" defaultValue={['item-1', 'item-2']}>
    <Accordion.Item value="item-1">
      <Accordion.Header>
        <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content>
        Yes. It adheres to the WAI-ARIA design pattern.
      </Accordion.Content>
    </Accordion.Item>

    <Accordion.Item value="item-2">
      <Accordion.Header>
        <Accordion.Trigger>Is it unstyled?</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content>
        Yes. It's completely unstyled by default.
      </Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);

​
Data Attributes

​
Root

  • data-orientation - "vertical" or "horizontal"

​
Item

  • data-state - "open" or "closed"
  • data-disabled - Present when disabled
  • data-orientation - "vertical" or "horizontal"

​
Header

  • data-state - "open" or "closed"
  • data-disabled - Present when disabled
  • data-orientation - "vertical" or "horizontal"

​
Trigger

  • data-state - "open" or "closed"
  • data-disabled - Present when disabled
  • data-orientation - "vertical" or "horizontal"

​
Content

  • data-state - "open" or "closed"
  • data-disabled - Present when disabled
  • data-orientation - "vertical" or "horizontal"

​
CSS Variables

​
Content

  • --radix-accordion-content-height - The height of the content when open
  • --radix-accordion-content-width - The width of the content when open

​
Keyboard Interactions

  • Space - When focus is on an Accordion.Trigger, opens associated content
  • Enter - When focus is on an Accordion.Trigger, opens associated content
  • Tab - Moves focus to the next focusable element
  • Shift + Tab - Moves focus to the previous focusable element
  • ArrowDown - Moves focus to the next Accordion.Trigger (vertical orientation)
  • ArrowUp - Moves focus to the previous Accordion.Trigger (vertical orientation)
  • ArrowRight - Moves focus to the next Accordion.Trigger (horizontal orientation)
  • ArrowLeft - Moves focus to the previous Accordion.Trigger (horizontal orientation)
  • Home - Moves focus to the first Accordion.Trigger
  • End - Moves focus to the last Accordion.Trigger

Build docs developers (and LLMs) love

Get started for freeTalk to us