Accordion

The Accordion component lets users show and hide sections of related content on a page. It supports both single and multiple expanded items (also called Disclosure).

Source

View source code

Issues

Report an issue

Package

@rootui/accordion

Reference

React Aria docs

Preview

variant

isDisabled

allowsMultipleExpanded

1<Accordion>
2  <Accordion.Item>
3    <Accordion.Trigger>
4      What are your shipping options?
5    </Accordion.Trigger>
6    <Accordion.Content>
7      We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.
8    </Accordion.Content>
9  </Accordion.Item>
10  <Accordion.Item>
11    <Accordion.Trigger>
12      What are your shipping options?
13    </Accordion.Trigger>
14    <Accordion.Content>
15      We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.
16    </Accordion.Content>
17  </Accordion.Item>
18</Accordion>

Anatomy

1<Accordion>
2  <Accordion.Item>
3    <Accordion.Trigger></Accordion.Trigger>
4    <Accordion.Content></Accordion.Content>
5  </Accordion.Item>
6</Accordion>

Installation

Package

Shadcn CLI

Manual

Note

Please ensure your local environment is fully configured as instructed in the getting started guide.

npm

yarn

pnpm

bun

npm install @rootui/accordion

Usage

1'use client'
2
3import { Accordion } from "@rootui/accordion";
4
5export default function Page() {
6  return (
7    <Accordion>
8      <Accordion.Item>
9        <Accordion.Trigger>Header here</Accordion.Trigger>
10        <Accordion.Trigger>Content here</Accordion.Trigger>
11      </Accordion.Item>
12    </Accordion>
13  )
14}

API Reference

See the React Aria documentation for more information.

Accordion

Prop	Type	Default
`variant`	`'transparent' \| 'divided' \| 'filled' \| 'outlined' \| 'contained'`	`'transparent'`

`allowsMultipleExpanded`	`Boolean`	`false`
Whether multiple items can be expanded at the same time.
`onExpandedChange`	`(keys: Set<Key>) => any`	`-`
Handler that is called when items are expanded or collapsed.
`isDisabled`	`Boolean`	`false`
Whether all items are disabled.
`expandedKeys`	`Iterable<Key>`	`-`
The currently expanded keys in the group (controlled).
`defaultExpandedKeys`	`Iterable<Key>`	`-`
The initial expanded keys in the group (uncontrolled).
`indicatorProps`	`AccordionIndicatorProps`	`-`

Attribute	Description
`data-disabled`	Whether the accordion is disabled.

Accordion.Item

Prop	Type	Default
`isDisabled`	`Boolean`	`false`
Whether the accordion item is disabled.
`isExpanded`	`Boolean`	`false`
Whether the accordion item is expanded (controlled).
`defaultExpanded`	`Boolean`	`false`
Whether the accordion item is expanded by default (uncontrolled).
`id`	`Key`	`-`
An id for the disclosure when used within a DisclosureGroup, matching the id used in expandedKeys.

Attribute	Description
`data-expanded`	Whether the accordion item is expanded.
`data-focus-visible-within`	Whether the accordion item has keyboard focus.
`data-disabled`	Whether the accordion item is disabled.

Accordion.Trigger

Prop	Type	Default
`children`	`ReactNode`	`-`
The children of the component.

Accordion.Content

Prop	Type	Default
`children`	`ReactNode`	`-`
The children of the component.
`labelElementType`	`ElementType`	`'label'`
The HTML element used to render the label, e.g. 'label', or 'span'.

Attribute	Description
`data-focus-visible-within`	Whether keyboard focus is within the accordion content.

CSS variable	Description
`--disclosure-panel-width`	The accordion content's intrinsic width in pixels. Useful for animations.
`--disclosure-panel-height`	The accordion content's intrinsic height in pixels. Useful for animations.