# Accordion

Expandable sections that grow in place and gently push the content below. Allows single or multiple open items, with an optional mode that highlights the section you open.

> Composed · Free · Layout — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add accordion
```

## Import

```tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion/accordion";
```

## Variants

- `multiple` — Multiple: `npx @lumioui/cli add accordion-multiple`
- `single` — Single: `npx @lumioui/cli add accordion-single`

## Props

### Accordion

| Prop | Type | Notes |
| --- | --- | --- |
| `type?` | `"single" | "multiple"` | Single = only one open at a time. |
| `value?` | `string[]` | Controlled open items. |
| `defaultValue?` | `string[]` | Initial open items (uncontrolled). |
| `onValueChange?` | `(value: string[]) => void` | Called when the open set changes. |
| `collapsible?` | `boolean` | Allow collapsing the last open item in single mode. Default true. |
| `lit?` | `boolean` | Lumio light (opt-in): closed questions sit at 70% ink, the open item lights with a faint accent wash before its panel grows, and the copy switches on once the surface has started to open. Default false. |
| `className?` | `string` | — |

### AccordionItem

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string` | — |
| `disabled?` | `boolean` | Disable this item's trigger. |
| `className?` | `string` | — |

### AccordionTrigger

| Prop | Type | Notes |
| --- | --- | --- |
| `icon?` | `IconName` | Optional leading icon name. |
| `accessibilityLabel?` | `string` | Accessible label (defaults to children text). |
| `accessibilityHint?` | `string` | Hint announced after the label. |
| `className?` | `string` | — |
| `textClassName?` | `string` | — |
| `iconClassName?` | `string` | — |
| `children?` | `React.ReactNode` | — |

### AccordionContent

| Prop | Type | Notes |
| --- | --- | --- |
| `description?` | `string` | Optional description shown above the main content. |
| `className?` | `string` | — |
| `textClassName?` | `string` | — |
| `descriptionClassName?` | `string` | — |
| `children?` | `React.ReactNode` | — |

## Icons rendered

- `chevron-down` — /icons.html?i=chevron-down

Source: https://lumioui.com/components/accordion