Collapsible | Zalify UI

React

Usage

import { Collapsible } from '@zalify-ui/react'

<Collapsible.Root>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>Content to show/hide</Collapsible.Content>
</Collapsible.Root>

Examples

Lazy Mount

Use the lazyMount prop to mount the content only when the collapsible is open.

React

Unmount on Exit

Use the unmountOnExit prop to unmount the content when the collapsible is closed.

React

Props

Root

Prop	Default	Type
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`collapsedHeight`		`string \| number` The height of the content when collapsed.
`collapsedWidth`		`string \| number` The width of the content when collapsed.
`defaultOpen`		`boolean` The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible.
`disabled`		`boolean` Whether the collapsible is disabled.
`ids`		`Partial<{ root: string; content: string; trigger: string }>` The ids of the elements in the collapsible. Useful for composition.
`onExitComplete`		`VoidFunction` The callback invoked when the exit animation completes.
`onOpenChange`		`(details: OpenChangeDetails) => void` The callback invoked when the open state changes.
`open`		`boolean` The controlled open state of the collapsible.