# AnimateHeight

Source: https://payloadcms.com/docs/ui-components/animate-height

The `AnimateHeight` component animates its children between a collapsed height and their natural height. It is useful when building disclosure controls and expandable regions.

## Import

```tsx
import { AnimateHeight } from '@payloadcms/ui'
```

## Interactive example

**Implementation**

```tsx
const [isOpen, setIsOpen] = useState(true)

<Button
  buttonStyle="secondary"
  extraButtonProps={{ 'aria-controls': 'details-panel', 'aria-expanded': isOpen }}
  margin={false}
  onClick={() => setIsOpen(!isOpen)}
>
  {isOpen ? 'Hide details' : 'Show details'}
</Button>
<AnimateHeight height={isOpen ? 'auto' : 0} id="details-panel">
  <div>Expandable content</div>
</AnimateHeight>
```

**Styling**

AnimateHeight controls movement rather than appearance. Style its content wrapper to give every expanded panel a project-specific surface.

```css
.rah-static > div {
  background: #f3f1ff;
  border-left: 3px solid #6d5dfc;
  border-radius: 4px;
  padding: 1rem;
}
```

- `background`: Expanded content surface.
- `border-left`: Accent edge for the expanded region.
- `padding`: Space around the animated content.

The control that changes `height` remains your responsibility. Give that control an accessible label and expose its expanded state with `aria-expanded` when it controls a disclosure region.

## Common props

These are the props most commonly used with this component. See its exported types in `@payloadcms/ui` for the complete list.

| Prop          | Type               | Default | Description                                     |
| ------------- | ------------------ | ------- | ----------------------------------------------- |
| `children` \* | `ReactNode`        | —       | Content whose height is animated.               |
| `height`      | `number \| 'auto'` | —       | Target height. Use `0` to collapse the content. |
| `duration`    | `number`           | `300`   | Animation duration in milliseconds.             |
| `id`          | `string`           | —       | Sets the wrapper element ID.                    |
| `className`   | `string`           | —       | Adds a class to the wrapper element.            |

_\* An asterisk denotes that a prop is required._