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 .
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 >
View code Emphasis
Use the emphasis prop to control the visual weight of the accordion.
{ }
< Accordion emphasis = ' normal ' >
< Accordion.Item >
< Accordion.Trigger > First question </ Accordion.Trigger >
< Accordion.Content >
< p > Answer to the first question. </ p >
View code Intents
Set the color context with the intent prop.
< Accordion intent = ' accent ' >
< Accordion.Item >
< Accordion.Trigger > Accent intent </ Accordion.Trigger >
< Accordion.Content >
< p > This accordion uses the accent color palette. </ p >
</ Accordion.Content >
View code States
Use type='multiple' to allow multiple items open simultaneously.
{ }
< Accordion type = ' single ' >
< Accordion.Item >
< Accordion.Trigger > Section A </ Accordion.Trigger >
< Accordion.Content >
< p > Content for section A. </ p >
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 >
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.
API reference 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"
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.