AnimateHeight
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
Interactive example
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 |
|---|---|---|---|
| | — | Content whose height is animated. |
| | — | Target height. Use |
| | | Animation duration in milliseconds. |
| | — | Sets the wrapper element ID. |
| | — | Adds a class to the wrapper element. |
* An asterisk denotes that a prop is required.
Was this page helpful?