# Collapsible

A trigger on the Soft tray and an inset card that opens in place.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/collapsible
```

## Usage

```tsx
import { Collapsible, CollapsibleRow } from '@/components/fetaui/collapsible'

export function Example() {
  return (
    <Collapsible title="Product details">
      <CollapsibleRow label="Material">Speckled stoneware</CollapsibleRow>
    </Collapsible>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | ReactNode | required |
| children | ReactNode | required |
| open | boolean |  |
| defaultOpen | boolean | false |
| onOpenChange | (open) => void |  |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For optional detail people can skip.
- As the base for your own disclosures: DisclosurePanel is exported.

## When not to use

- For anything people need in order to decide.
- For a list of several disclosures: use Accordion.

## Accessibility

- The whole trigger is a button with aria-expanded and aria-controls.
- A closed panel is inert, so focus never lands inside it.

## Motion

- Height grows on a 320 ms spring and content fades in from 80 ms.
- Closing fades content first and takes 220 ms.
- The chevron turns in 200 ms. Hover washes the trigger at 4% in 120 ms.
- With reduced motion, height is instant and content fades in 120 ms.