Accordion

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

Usage

import { Accordion } from '@raystack/apsara'

Accordion Props

Prop	Type	Default
`type`	`"single" \| "multiple"`	`"single"`
`value`	`string \| string[]`	-
`defaultValue`	`string \| string[]`	-
`onValueChange`	`((value: string \| string[]) => void)`	-
`collapsible`	`boolean`	`true`
`disabled`	`boolean`	`false`
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`
`dir`	`"ltr" \| "rtl"`	`"ltr"`
`className`	`string`	-

Accordion.Item Props

Prop	Type	Default
`value`	`string`	-
`disabled`	`boolean`	`false`
`className`	`string`	-

Accordion.Trigger Props

Prop	Type	Default
`className`	`string`	-

Accordion.Content Props

Prop	Type	Default
`forceMount`	`boolean`	`false`
`className`	`string`	-

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

<Accordion type="single" collapsible>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>What is Apsara?</Accordion.Trigger>
    <Accordion.Content>
      Apsara is a modern design system and component library built with React
      and TypeScript.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>How do I get started?</Accordion.Trigger>
    <Accordion.Content>
      You can install Apsara using your preferred package manager and start
      building your application.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Is it customizable?</Accordion.Trigger>
    <Accordion.Content>
      Yes, Apsara provides extensive customization options through CSS variables
      and component props.
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Controlled

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

(function ControlledAccordion() {
  const [value, setValue] = React.useState("item-1");
 
  return (
    <Accordion value={value} onValueChange={setValue}>
      <Accordion.Item value="item-1">
        <Accordion.Trigger>Item 1</Accordion.Trigger>
        <Accordion.Content>Content for item 1</Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-2">
        <Accordion.Trigger>Item 2</Accordion.Trigger>
        <Accordion.Content>Content for item 2</Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
})

Disabled Items

Individual accordion items can be disabled using the disabled prop.

<Accordion>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Enabled Item</Accordion.Trigger>
    <Accordion.Content>
      This item is enabled and can be toggled.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2" disabled>
    <Accordion.Trigger>Disabled Item</Accordion.Trigger>
    <Accordion.Content>
      This item is disabled and cannot be toggled.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Another Enabled Item</Accordion.Trigger>
    <Accordion.Content>This item is also enabled.</Accordion.Content>
  </Accordion.Item>
</Accordion>

Custom Content

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

<Accordion>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Product Features</Accordion.Trigger>
    <Accordion.Content>
      <div style={{ padding: "16px" }}>
        <h4>Key Features</h4>
        <ul>
          <li>Responsive design</li>
          <li>Accessible components</li>
          <li>TypeScript support</li>
          <li>Customizable themes</li>
        </ul>
      </div>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Documentation</Accordion.Trigger>
    <Accordion.Content>
      <div style={{ padding: "16px" }}>
        <p>Comprehensive documentation with examples and API references.</p>
        <a href="/docs">View Documentation</a>
      </div>
    </Accordion.Content>
  </Accordion.Item>
</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

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

AccordionnewNEW