# Accordion (/docs/accordion)
`Accordion` is a stack of expandable sections: each item is a heading wrapping a trigger button, and clicking it reveals that item's panel. Content never animates via Ark's own JS-measured height — the same category of runtime-measurement quirk this kit already worked around for [`Slider`](/docs/slider)'s `thumbSize` — instead every panel renders through [`Collapse`](/docs/collapse), this kit's own zero-JS, CSS-grid-rows animation primitive.
```tsx
import { Accordion } from '@42-central/ui-react/accordion';
```
## Playground [#playground]
## Items [#items]
`data` is a flat array of `{ value, label, content, disabled?, icon? }` — each section needs its own `content`, so (unlike [`SegmentGroup`](/docs/segment-group)) there's no bare-string shorthand.
```tsx
},
{ value: 'returns', label: 'Returns & refunds', content: },
{ value: 'payment', label: 'Payment methods', content: , disabled: true },
]}
/>
```
Each item also accepts an optional `testId`, defaulting to `` `accordion-${value}` `` — the matching content panel gets `` `${testId}-content` ``. See the [Testing](/docs/testing) guide. The compound `Accordion.Item` / `Accordion.ItemTrigger` / `Accordion.ItemContent` / `Accordion.Root` parts each take their own `testId` prop directly, for the same reason.
## Variants [#variants]
Two treatments — a different vocabulary than [`Button`](/docs/button)'s own `filled`/`light`/`outline`/`subtle`. `default` is a single bordered list with dividers between items; `separated` lays each item out as its own bordered card with a gap between them, its border deepening to a solid neutral ink while open. `radius` (ignored by `default`) rounds the `separated` cards.
## Sizes [#sizes]
Five sizes — `xs` through `xl` — matching the rest of the family. Sizing lives on the triggers and panels.
## Multiple [#multiple]
By default only one section can be open at a time. Pass `multiple` to let any number stay expanded together.
## Collapsible [#collapsible]
In single mode (the default), the one open section can't be closed by re-clicking its own trigger — some other section must be opened instead. Pass `collapsible` to allow closing it directly, leaving every section collapsed.
## Chevron [#chevron]
`chevronPosition` (`"start" | "end"`, default `"end"`) is a logical position, not a physical left/right — it flips correctly under `dir="rtl"` with no extra CSS (the same convention [`Divider`](/docs/divider)'s `labelPosition` uses).
Pass `chevron` to swap the icon entirely, or `chevron={null}` to hide it — there's no separate flag to keep the default icon but disable its open/close rotation.
```tsx
import { ChevronDown } from 'lucide-react';
} data={SECTIONS} />
```
## Disabled [#disabled]
A single item can be disabled via `{ value, label, content, disabled: true }` — it's skipped by keyboard navigation and can't be opened. Pass `disabled` on `Accordion` itself to disable every item at once.
## Compound API [#compound-api]
Drop to the composable parts for anything the flat `data` array can't express — custom trigger content, interleaved non-item elements, or driving the value from your own state. `variant` / `size` / `radius` / `chevronPosition` / `chevron` / `order` all live on `Accordion.Root` — there's no separate `List` part the way [`Tabs`](/docs/tabs) has one, since the root itself *is* the list — and cascade to every item through context.
```tsx
'use client';
import { Accordion } from '@42-central/ui-react/accordion';
ShippingOrders ship within 2 business days.Returns & refundsReturns accepted within 30 days.
```
## Controlled [#controlled]
Drive the value from state with the same `value` / `onChange` pair either way: the data-driven form takes them as top-level props, and the compound `Accordion.Root` accepts them too — it flattens Ark's own `onValueChange` into `onChange` for you, so `onValueChange` isn't a prop on either form.
```tsx
'use client';
import { useState } from 'react';
import { Accordion } from '@42-central/ui-react/accordion';
export function FaqAccordion() {
const [open, setOpen] = useState(['shipping']);
return (
},
{ value: 'returns', label: 'Returns & refunds', content: },
]}
/>
);
}
```
## API [#api]
## Accessibility [#accessibility]
* Built on Ark UI's Accordion machine and the [WAI-ARIA Accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/): each trigger is a real `