Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Collapsible

Used to expand and collapse additional content.

SourceStorybookRecipeArk

Usage

import { Collapsible } from "@chakra-ui/react"
<Collapsible.Root>
  <Collapsible.Trigger />
  <Collapsible.Content />
</Collapsible.Root>

Examples

Lazy Mounted

Use the unmountOnExit prop to make the content unmount when collapsed.

Props

Root

PropDefaultType
lazyMount false
boolean

Whether to enable lazy mounting

unmountOnExit false
boolean

Whether to unmount on exit.

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

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.

Previous

Close Button

Next

Combobox