Components
Accordion
Stacked, collapsible panels driven by an items array, with optional single-open behavior.
Accordion renders a vertical stack of collapsible panels from an items array,
each with an id, title, and content. By default allowMultiple lets any
number of panels stay open at once; set it to false for exclusive (one-at-a-time)
behavior. Use defaultOpenIds to choose which panels start expanded, and mark
individual items disabled. Built on Headless UI for keyboard and focus support.
Example
Preview
import { Accordion } from '@officina/ui';
<Accordion
defaultOpenIds={['shipping']}
items={[
{ id: 'shipping', title: 'Shipping', content: <p>Ships in 2–3 days.</p> },
{ id: 'returns', title: 'Returns', content: <p>30-day returns.</p> },
]}
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | AccordionItem[] | — | Panel definitions. |
| allowMultiple | boolean | true | Allow more than one panel open at a time. |
| className | string | — | |
| defaultOpenIds | string[] | [] | Ids of panels open on first render. |