# Collapsible

> One disclosure: a title row with a toggle, an always-visible summary and a region that opens beneath it.

Category: Layout and surfaces. Docs page: https://rime.mjsons.net/components/collapsible

## Installation

```bash
npx shadcn@latest add KezLahd/rime/collapsible
```

Collapsible shows the first part of something and keeps the rest a click away: the first of several items, advanced options, a long note. The summary stays visible whether open or closed; children open beneath it.

The region animates its height on a grid-row transition and is inert while closed. Control it with open and onOpenChange, or leave it uncontrolled with defaultOpen.

## Usage

```tsx
import { Collapsible } from "@/components/ui";

<Collapsible title="Jane Cooper starred 3 projects" summary={<Row>north-office/website</Row>}>
  <Row>north-office/brand-refresh</Row>
  <Row>north-office/quarterly-report</Row>
</Collapsible>
```

## Props: Collapsible

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` (required) | `ReactNode` |  | The trigger's text. A chevron button sits at its right. |
| `summary` | `ReactNode` |  | Shown whether open or closed, under the trigger row (the first item of a list, say). |
| `children` (required) | `ReactNode` |  |  |
| `open` | `boolean` |  |  |
| `defaultOpen` | `boolean` | `false` |  |
| `onOpenChange` | `(open: boolean) => void` |  |  |
| `toggleLabel` | `string` |  | Accessible name for the icon trigger. Defaults to "Show more" / "Show less". |
| `className` | `string` |  |  |

## Examples

### Open, with a summary

```tsx
<Collapsible title="Jane Cooper starred 3 projects" summary={<Row>north-office/website</Row>} defaultOpen>
  …
</Collapsible>
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--collapsible-width` | `min(380px, 100%)` |

System tokens it reads: `--dur`, `--dur-slow`, `--ease`, `--ease-out`, `--focus-ring`, `--ink-brand`, `--ink-heading`, `--ink-muted`, `--r-sm`, `--text-small`, `--wash-active`, `--wash-subtle`.

## Accessibility

- The toggle is a button with aria-expanded and aria-controls pointing at the region; its name switches between "Show more" and "Show less" unless toggleLabel is given.
- The closed region is inert, so its content is out of the tab order and the accessibility tree.

## Do

- Use it for one disclosure; use Accordion for a list of them.

## Don't

- Don't put the only copy of an error or a required field inside a closed Collapsible.

Related: https://rime.mjsons.net/components/accordion