Accordion

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.

'single' | 'multiple'

required

Determines whether one or multiple items can be opened at the same time.

string

The controlled value of the item to expand when type is "single". Must be used in conjunction with onValueChange.

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.

(value: string) => void

Event handler called when the expanded state changes and type is "single".

string[]

The controlled value of the items to expand when type is "multiple". Must be used in conjunction with onValueChange.

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.

(value: string[]) => void

Event handler called when the expanded state changes and type is "multiple".

boolean

default:"false"

When type is "single", allows closing content when clicking trigger for an open item.

boolean

default:"false"

When true, prevents the user from interacting with the accordion and all its items.

'vertical' | 'horizontal'

default:"'vertical'"

The orientation of the accordion.

'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.

string

required

A unique value for the item.

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.

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

Overlays

Navigation

Forms

Layout

Data Display

Utilities

Overview

Features

Installation

Anatomy

API Reference

Root

Item

Header

Trigger

Content

Examples

Single Item

Multiple Items

Data Attributes

Root

Item

Header

Trigger

Content

CSS Variables

Content

Keyboard Interactions

​Overview

​Features

​Installation

​Anatomy

​API Reference

​Root

​Item

​Header

​Trigger

​Content

​Examples

​Single Item

​Multiple Items

​Data Attributes

​Root

​Item

​Header

​Trigger

​Content

​CSS Variables

​Content

​Keyboard Interactions

Overview

Features

Installation

Anatomy

API Reference

Root

Item

Header

Trigger

Content

Examples

Single Item

Multiple Items

Data Attributes

Root

Item

Header

Trigger

Content

CSS Variables

Content

Keyboard Interactions