# Accordion

> Sections that open in place: a category and its entries, a question and its answer. Each header is a heading with a button in it, and up and down move between headers. A trailing value, such as an Amount, is part of the header's name; actions sit beside the button, outside it, so a click on them does not toggle the section. The panel opens to its height in CSS.

Section: Primitives. Docs: https://entrepta.vercel.app/docs/components/accordion

## Install

```bash
npx @entrepta/cli@latest add accordion
```

Files: `primitives/accordion.tsx`.
npm packages: `@radix-ui/react-accordion`, `@phosphor-icons/react`.

## Usage

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

<Accordion type="single" collapsible>
  <AccordionItem value="home">
    <AccordionTrigger
      trailing={<Amount value={-192380} tone="neutral" />}
      actions={<Button variant="ghost" size="icon-sm" aria-label="Edit home">…</Button>}
    >
      home
    </AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `"single" \| "multiple"` | - | One open at a time, or several. collapsible lets the open one close |
| `value, defaultValue, onValueChange` | `string \| string[]` | - | Controlled or not |
| `trailing` | `ReactNode` | - | On AccordionTrigger: a value on the right |
| `actions` | `ReactNode` | - | On AccordionTrigger: buttons beside it |
| `headingLevel` | `2 \| 3 \| 4` | 3 | On AccordionTrigger: the header's level in the page |