# Accordion

> Vertically stacked collapsible content sections

Status: stable. Added in Components 2.0.0. Updated in Components 2.17.0, 24 Oct 2026.

Vertically stacked collapsible content sections built on native `<details>`/`<summary>` elements with CSS-animated expand/collapse.

For a single panel, such as the rest of a ticket list or extra filters, use [Collapsible](https://ticketsolutionsptyltd.github.io/roadie/components/collapsible.md).

## Import

```tsx
import { Accordion } from '@oztix/roadie-components/accordion'
```

## Examples

### Default

Only one item can be open at a time in single mode (the default).

```tsx
<Accordion>
  <Accordion.Item>
    <Accordion.Trigger>What is Roadie?</Accordion.Trigger>
    <Accordion.Content>
      <p>Roadie is a comprehensive design system built for Oztix applications. It provides CSS design tokens, a React component library, and documentation to help teams build consistent, accessible user interfaces across products.</p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Trigger>How do I install it?</Accordion.Trigger>
    <Accordion.Content>
      <div className='grid gap-2'>
        <p>Install the packages via pnpm:</p>
        <p className='text-sm text-subtle'>pnpm add @oztix/roadie-core @oztix/roadie-components</p>
        <p>Then import the CSS foundation in your app's global stylesheet and add the source directive so Tailwind scans the component dist for class strings.</p>
      </div>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>
      <p>Yes. Interactive components use Base UI primitives that follow WAI-ARIA guidelines. The accordion itself uses native details and summary elements, giving you built-in keyboard navigation and screen reader support with no extra JavaScript.</p>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
```

### Emphasis

Use the `emphasis` prop to control the visual weight of the accordion.

```tsx
{/* Normal */}
<Accordion emphasis='normal'>
  <Accordion.Item>
    <Accordion.Trigger>First question</Accordion.Trigger>
    <Accordion.Content>
      <p>Answer to the first question.</p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Trigger>Second question</Accordion.Trigger>
    <Accordion.Content>
      <p>Answer to the second question.</p>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
{/* Subtle */}
<Accordion emphasis='subtle'>
  <Accordion.Item>
    <Accordion.Trigger>First question</Accordion.Trigger>
    <Accordion.Content>
      <p>Answer to the first question.</p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Trigger>Second question</Accordion.Trigger>
    <Accordion.Content>
      <p>Answer to the second question.</p>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
{/* Subtler */}
<Accordion emphasis='subtler'>
  <Accordion.Item>
    <Accordion.Trigger>First question</Accordion.Trigger>
    <Accordion.Content>
      <p>Answer to the first question.</p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Trigger>Second question</Accordion.Trigger>
    <Accordion.Content>
      <p>Answer to the second question.</p>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
```

### Intents

Set the color context with the `intent` prop.

```tsx
<Accordion intent='accent'>
  <Accordion.Item>
    <Accordion.Trigger>Accent intent</Accordion.Trigger>
    <Accordion.Content>
      <p>This accordion uses the accent color palette.</p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Trigger>Second item</Accordion.Trigger>
    <Accordion.Content>
      <p>Intent cascades to all children.</p>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
<Accordion intent='danger' emphasis='subtle'>
  <Accordion.Item>
    <Accordion.Trigger>Danger intent with subtle emphasis</Accordion.Trigger>
    <Accordion.Content>
      <p>Intents work with all emphasis levels.</p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Trigger>Second item</Accordion.Trigger>
    <Accordion.Content>
      <p>Intent cascades to all children.</p>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
```

### States

Use `type='multiple'` to allow multiple items open simultaneously.

```tsx
{/* Single (default) */}
<Accordion type='single'>
  <Accordion.Item>
    <Accordion.Trigger>Section A</Accordion.Trigger>
    <Accordion.Content>
      <p>Content for section A.</p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Trigger>Section B</Accordion.Trigger>
    <Accordion.Content>
      <p>Content for section B.</p>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
{/* Multiple */}
<Accordion type='multiple'>
  <Accordion.Item>
    <Accordion.Trigger>Section A</Accordion.Trigger>
    <Accordion.Content>
      <p>Content for section A.</p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Trigger>Section B</Accordion.Trigger>
    <Accordion.Content>
      <p>Content for section B.</p>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
```

### Composition

Accordion is a compound component with `Accordion.Item`, `Accordion.Trigger`, and `Accordion.Content`.

```tsx
<Accordion>
  <Accordion.Item>
    <Accordion.Trigger>What is Roadie?</Accordion.Trigger>
    <Accordion.Content>
      <p>Roadie is a comprehensive design system for building consistent user interfaces.</p>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
```

## Accessibility

- **Keyboard**: `Enter` or `Space` toggles an item. Native `<details>`/`<summary>` elements provide built-in keyboard support.
- **ARIA**: Each summary is focusable by default. The browser manages `aria-expanded` state natively.
- **Screen readers**: Announce open/closed state automatically via the native disclosure pattern.

## API reference

### Accordion

```tsx
import { Accordion } from '@oztix/roadie-components/accordion'
```

- `intent`: `"neutral" | "brand" | "brand-secondary" | "brand-blue" | "brand-orange" | "brand-purple" | "accent" | "danger" | "success" | "warning" | "info" | null`.
- `emphasis`: `"normal" | "subtle" | "subtler" | null`.
- `type`: `"single" | "multiple"`.

### Accordion.Content

No props beyond the standard HTML attributes.

### Accordion.Item

No props beyond the standard HTML attributes.

### Accordion.Trigger

No props beyond the standard HTML attributes.

Docs updated 19 Oct 2026.