# AccordionItem

An individual collapsible item within an Accordion.

## Import

```tsx
import { AccordionItem } from '@coinbase/cds-web/accordion/AccordionItem'
```

## Examples

Check [Accordion](/components/layout/Accordion) for usage examples.

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Collapsible content |
| `itemKey` | `string` | Yes | `-` | Key of the accordion item. This should be unique inside the same Accordion unless you want multiple items to be controlled at the same time. |
| `title` | `string` | Yes | `-` | Title of the accordion item |
| `headerRef` | `RefObject<HTMLButtonElement>` | No | `-` | - |
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
| `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
| `onClick` | `((key: string) => void)` | No | `-` | Callback function fired when the accordion item is clicked |
| `panelRef` | `RefObject<HTMLDivElement>` | No | `-` | - |
| `style` | `CSSProperties` | No | `-` | - |
| `subtitle` | `string` | No | `-` | Subtitle of the accordion item |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |