HomeHome PrimitivesPrimitives VisualizesVisualizes HooksHooks

Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Yes. It adheres to the WAI-ARIA design pattern.

Features

Full keyboard navigation.

Supports horizontal/vertical orientation.

Supports Right to Left direction.

Can expand one or multiple items.

Can be controlled or uncontrolled.

Installation

Install the component from your command line.

npm install @tealess/accordion

Anatomy

Import all parts and piece them together.

import * as Accordion from "@tealess/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.

Prop	Type	Default
`asChild`	`boolean`	`false`
`type*`	`enum`	No default value
`value`	`string`	No default value
`defaultValue`	`string`	No default value
`onValueChange`	`function`	No default value
`value`	`string[]`	`[]`
`defaultValue`	`string[]`	`[]`
`onValueChange`	`function`	No default value
`collapsible`	`boolean`	`false`
`disabled`	`boolean`	`false`
`dir`	`enum`	`"ltr"`
`orientation`	`enum`	`"vertical"`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

Item

Contains all the parts of a collapsible section.

Prop	Type	Default
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`value*`	`string`	No default value

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Wraps an Accordion.Trigger. Use the asChild prop to update it to the appropriate heading level for your page.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Trigger

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

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Content

Contains the collapsible content for an item.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	No default value

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

CSS Variable	Description
`--radix-accordion-content-width`	The width of the content when it opens/closes
`--radix-accordion-content-height`	The height of the content when it opens/closes

Examples

Expanded by default

Use the defaultValue prop to define the open item by default.

<Accordion.Root type="single" defaultValue="item-2">
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>

Allow collapsing all items

Use the collapsible prop to allow all items to close.

<Accordion.Root type="single" collapsible>
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>

Multiple items open at the same time

Set the type prop to multiple to enable opening multiple items at once.

<Accordion.Root type="multiple">
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>

Rotated icon when open

You can add extra decorative elements, such as chevrons, and rotate it when the item is open.

// index.jsx
import * as Accordion from "@tealess/accordion";
import { ChevronDownIcon } from "@tealess/icons";
import "./styles.css";

export default () => (
  <Accordion.Root type="single">
    <Accordion.Item value="item-1">
      <Accordion.Header>
        <Accordion.Trigger className="AccordionTrigger">
          <span>Trigger text</span>
          <ChevronDownIcon className="AccordionChevron" aria-hidden />
        </Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content>…</Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);

/* styles.css */
.AccordionChevron {
  transition: transform 300ms;
}
.AccordionTrigger[data-state="open"] > .AccordionChevron {
  transform: rotate(180deg);
}

Horizontal orientation

Use the orientation prop to create a horizontal accordion.

<Accordion.Root orientation="horizontal">
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>

Animating content size

Use the --radix-accordion-content-width and/or --radix-accordion-content-height CSS variables to animate the size of the content when it opens/closes:

// index.jsx
import * as Accordion from "@tealess/accordion";
import "./styles.css";

export default () => (
  <Accordion.Root type="single">
    <Accordion.Item value="item-1">
      <Accordion.Header>…</Accordion.Header>
      <Accordion.Content className="AccordionContent">…</Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);

/* styles.css */
.AccordionContent {
  overflow: hidden;
}
.AccordionContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

Accessibility

Adheres to the Accordion WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
`Space`	When focus is on an `Accordion.Trigger` of a collapsed section, expands the section.
`Enter`	When focus is on an `Accordion.Trigger` of a collapsed section, expands the section.
`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` when `orientation` is `vertical`.
`ArrowUp`	Moves focus to the previous `Accordion.Trigger` when `orientation` is `vertical`.
`ArrowRight`	Moves focus to the next `Accordion.Trigger` when `orientation` is `horizontal`.
`ArrowLeft`	Moves focus to the previous `Accordion.Trigger` when `orientation` is `horizontal`.
`Home`	When focus is on an `Accordion.Trigger`, moves focus to the first `Accordion.Trigger`.
`End`	When focus is on an `Accordion.Trigger`, moves focus to the last `Accordion.Trigger`.

PreviousServer side rendering

NextAlert Dialog

Edit this page on GitHub.

Overview

Guides

Components

Utilities

Accordion

Features

Installation

Anatomy

API Reference

Root

Item

Header

Trigger

Content

Examples

Expanded by default

Allow collapsing all items

Multiple items open at the same time

Rotated icon when open

Horizontal orientation

Animating content size

Accessibility

Keyboard Interactions

Overview

Guides

Components

Utilities

Accordion

Is it accessible?

Is it unstyled?

Can it be animated?

Features