# AnimateHeight

Source: https://payloadcms.com/docs/beta/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

Inside a Payload Admin Panel Custom Component:

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

You can also import the component directly:

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

## 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 className="expandable-content">Expandable content</div>
</AnimateHeight>
```

**Styling**

AnimateHeight controls only the height transition. Apply visual styles to its child content so the same surface is used throughout the animation.

```css
@layer payload {
  .expandable-content {
    padding: var(--spacer-3);
    color: var(--color-text);
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
  }
}
```

- `--color-bg-secondary`: Expandable content background.
- `--color-border`: Expandable content border.
- `--radius-medium`: Expandable content corner radius.

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`      | `0 \| 'auto'` | —       | Uses `0` to collapse and `'auto'` to expand. |
| `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._