Collapsible

Accessible show/hide section that toggles between expanded and collapsed states.

Category: Utility — Pattern: Base UI Overlay

Dependency: @base-ui-components/react/collapsible

Preview

Keyboard shortcuts

⌘ K — Open command palette

Loading preview...

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@hareru/ui"

<Collapsible>
  <CollapsibleTrigger>Show Details</CollapsibleTrigger>
  <CollapsibleContent><p>Collapsible content</p></CollapsibleContent>
</Collapsible>

Import

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@hareru/ui"

Exports

Name	Type	Description
`Collapsible`	Component	Root collapsible context; accepts `open`, `defaultOpen`, and `onOpenChange`
`CollapsibleTrigger`	Component	Element that toggles the expanded state
`CollapsibleContent`	Component	Section that is shown or hidden based on open state

Key Props

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Initial expanded state (uncontrolled)
`open`	`boolean`	—	Controlled expanded state
`onOpenChange`	`(open: boolean) => void`	—	Callback when expanded state changes
`disabled`	`boolean`	`false`	Prevents toggling

Structure

CollapsibleTrigger [trigger] (expected)
CollapsibleContent [content] (expected)

(expected) = recommended in canonical composition, not runtime-required.

States

State	Type	Values	Default	CSS Reflection
`disabled`	`boolean`	—	—	—
`open`	`boolean`	—	—	—

Accessibility

Keyboard:
- Enter or Space to toggle
Notes: Disclosure widget with animated expand/collapse.

Usage

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@hareru/ui"

<Collapsible>
  <CollapsibleTrigger>Show Details</CollapsibleTrigger>
  <CollapsibleContent><p>Collapsible content</p></CollapsibleContent>
</Collapsible>

Notes

CollapsibleContent animates open/close when CSS transitions are applied to [data-state="open"] and [data-state="closed"].
The data-state attribute on both CollapsibleTrigger and CollapsibleContent reflects "open" or "closed" for CSS targeting.
Use the controlled open + onOpenChange props when you need to synchronise state with other UI elements.

On this page