Accordion

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

Usage

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

Accordion Props

Prop

Type

Accordion.Item Props

Prop

Type

Accordion.Trigger Props

Prop

Type

Accordion.Content Props

Prop

Type

Examples

Single vs Multiple

The Accordion component supports two types of behavior:

  • Single: Only one item can be open at a time
  • Multiple: Multiple items can be open simultaneously
1<Accordion type="single" collapsible>
2  <Accordion.Item value="item-1">
3    <Accordion.Trigger>What is Apsara?</Accordion.Trigger>
4    <Accordion.Content>
5      Apsara is a modern design system and component library built with React
6      and TypeScript.
7    </Accordion.Content>
8  </Accordion.Item>
9  <Accordion.Item value="item-2">
10    <Accordion.Trigger>How do I get started?</Accordion.Trigger>
11    <Accordion.Content>
12      You can install Apsara using your preferred package manager and start
13      building your application.
14    </Accordion.Content>
15  </Accordion.Item>
16  <Accordion.Item value="item-3">
17    <Accordion.Trigger>Is it customizable?</Accordion.Trigger>
18    <Accordion.Content>
19      Yes, Apsara provides extensive customization options through CSS variables
20      and component props.
21    </Accordion.Content>
22  </Accordion.Item>
23</Accordion>

Controlled

You can control the accordion's state by providing value and onValueChange props.

1(function ControlledAccordion() {
2  const [value, setValue] = React.useState("item-1");
3

4  return (
5    <Accordion value={value} onValueChange={setValue}>
6      <Accordion.Item value="item-1">
7        <Accordion.Trigger>Item 1</Accordion.Trigger>
8        <Accordion.Content>Content for item 1</Accordion.Content>
9      </Accordion.Item>
10      <Accordion.Item value="item-2">
11        <Accordion.Trigger>Item 2</Accordion.Trigger>
12        <Accordion.Content>Content for item 2</Accordion.Content>
13      </Accordion.Item>
14    </Accordion>
15  );
16})

Disabled Items

Individual accordion items can be disabled using the disabled prop.

1<Accordion>
2  <Accordion.Item value="item-1">
3    <Accordion.Trigger>Enabled Item</Accordion.Trigger>
4    <Accordion.Content>
5      This item is enabled and can be toggled.
6    </Accordion.Content>
7  </Accordion.Item>
8  <Accordion.Item value="item-2" disabled>
9    <Accordion.Trigger>Disabled Item</Accordion.Trigger>
10    <Accordion.Content>
11      This item is disabled and cannot be toggled.
12    </Accordion.Content>
13  </Accordion.Item>
14  <Accordion.Item value="item-3">
15    <Accordion.Trigger>Another Enabled Item</Accordion.Trigger>
16    <Accordion.Content>This item is also enabled.</Accordion.Content>
17  </Accordion.Item>
18</Accordion>

Custom Content

The accordion content can contain any React elements, allowing for rich layouts and complex content.

1<Accordion>
2  <Accordion.Item value="item-1">
3    <Accordion.Trigger>Product Features</Accordion.Trigger>
4    <Accordion.Content>
5      <div style={{ padding: "16px" }}>
6        <h4>Key Features</h4>
7        <ul>
8          <li>Responsive design</li>
9          <li>Accessible components</li>
10          <li>TypeScript support</li>
11          <li>Customizable themes</li>
12        </ul>
13      </div>
14    </Accordion.Content>
15  </Accordion.Item>
16  <Accordion.Item value="item-2">
17    <Accordion.Trigger>Documentation</Accordion.Trigger>
18    <Accordion.Content>
19      <div style={{ padding: "16px" }}>
20        <p>Comprehensive documentation with examples and API references.</p>
21        <a href="/docs">View Documentation</a>
22      </div>
23    </Accordion.Content>
24  </Accordion.Item>
25</Accordion>

Accessibility

The Accordion component is built on top of Radix UI's Accordion primitive and follows the WAI-ARIA design pattern for accordions. It includes:

  • Proper ARIA attributes for screen readers
  • Keyboard navigation support
  • Focus management
  • Semantic HTML structure

Keyboard Navigation

  • Space or Enter: Toggle the focused accordion item
  • Arrow Down: Move focus to the next accordion item
  • Arrow Up: Move focus to the previous accordion item
  • Home: Move focus to the first accordion item
  • End: Move focus to the last accordion item