Accordion

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

Import

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

Examples

Default

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

<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>
View code

Emphasis

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

<div className='grid gap-6'>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Normal</p>
    <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>
  </div>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Subtle</p>
    <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>
  </div>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Subtler</p>
    <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>
  </div>
</div>
View code

Intents

Set the color context with the intent prop.

<div className='grid gap-6'>
  <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>
</div>
View code

States

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

<div className='grid gap-4'>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Single (default)</p>
    <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>
  </div>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Multiple</p>
    <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>
  </div>
</div>
View code

Composition

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

<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>
View code

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.