Skip to main content
The Accordion component allows users to show and hide sections of related content on a page. It uses a composable API with separate components for root, item, trigger, and content.

​
Usage

import { Accordion } from '@raystack/apsara';

export default function Example() {
  return (
    <Accordion defaultValue="item-1">
      <Accordion.Item value="item-1">
        <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
        <Accordion.Content>
          Yes. It adheres to the WAI-ARIA design pattern.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-2">
        <Accordion.Trigger>Is it styled?</Accordion.Trigger>
        <Accordion.Content>
          Yes. It comes with default styles that can be customized.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

​
Multiple items open

<Accordion multiple defaultValue={["item-1", "item-2"]}>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>First section</Accordion.Trigger>
    <Accordion.Content>First content</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Second section</Accordion.Trigger>
    <Accordion.Content>Second content</Accordion.Content>
  </Accordion.Item>
</Accordion>

​
API reference

​
Accordion (Root)

The root container component for the accordion.
​
multiple
boolean
default:"false"
Whether multiple items can be open at the same time.
​
value
string | string[]
The controlled value of the accordion. Use string for single mode, string array for multiple mode.
​
defaultValue
string | string[]
The default value when uncontrolled. Use string for single mode, string array for multiple mode.
​
onValueChange
(value?: string | string[]) => void
Callback fired when the accordion value changes. Receives string for single mode, string array for multiple mode.
​
className
string
Additional CSS class for the accordion root.

​
Accordion.Item

An individual accordion item.
​
value
string
required
A unique value for the item.
​
className
string
Additional CSS class for the accordion item.
​
disabled
boolean
Whether the accordion item is disabled.

​
Accordion.Trigger

The button that toggles the accordion item.
​
className
string
Additional CSS class for the trigger.
​
children
ReactNode
The content of the trigger button.

​
Accordion.Content

The collapsible content area.
​
className
string
Additional CSS class for the content wrapper.
​
children
ReactNode
The content to display when expanded.