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
Inside a Payload Admin Panel Custom Component:
You can also import the component directly:
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. |
| | — | Uses |
| | | 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?