# Accordion

A collapsible content panel that toggles between expanded and collapsed states. Useful for organizing long-form content into manageable sections.

```tsx demo
import { Accordion } from "@tenstorrent/vesper/accordion";

export default function AccordionDemo() {
  return (
    <Accordion title="Click to expand">
      This is the accordion content. It can contain any text or elements.
    </Accordion>
  );
}
```

## Options

| Prop           | Type                      | Description                                                   | Default |
| -------------- | ------------------------- | ------------------------------------------------------------- | ------- |
| `title`        | `string`                  | The title text displayed in the accordion trigger.            | —       |
| `defaultOpen`  | `boolean`                 | Whether the accordion is open by default (uncontrolled mode). | `false` |
| `open`         | `boolean`                 | Controls the open state of the accordion (controlled mode).   | —       |
| `onOpenChange` | `(open: boolean) => void` | Callback fired when the open state changes.                   | —       |
| `children`     | `ReactNode`               | The content displayed when the accordion is expanded.         | —       |

You may also pass additional props to the underlying `div` element. For example, you may wish to give the `<Accordion>` instance a custom max-width, aria-label, etc.

## Examples

### Basic usage

Render an `Accordion` by giving it a `title` and `children`, leaving it to keep track of its own open/closed state:

```tsx demo
import { Accordion } from "@tenstorrent/vesper/accordion";

export default function BasicAccordion() {
  return <Accordion title="Section Title">Content goes here.</Accordion>;
}
```

### Default open state

You can render an `Accordion` in a default opened state by passing `defaultOpen`:

```tsx demo
import { Accordion } from "@tenstorrent/vesper/accordion";

export default function DefaultOpenAccordion() {
  return (
    <Accordion title="Already Open" defaultOpen>
      This accordion starts expanded.
    </Accordion>
  );
}
```

### Controlled usage

If you need to control the open/closed state of the `Accordion`, you can do so via the `open` and `onOpenChange` props:

```tsx demo
import { useState } from "react";

import { Accordion } from "@tenstorrent/vesper/accordion";

export default function ControlledAccordion() {
  const [open, setOpen] = useState(false);

  return (
    <Accordion title="Controlled" open={open} onOpenChange={setOpen}>
      Controlled accordion content.
    </Accordion>
  );
}
```