Collapsible

A compound component for revealing and hiding content. Built on Radix UI's collapsible primitive, it supports both controlled and uncontrolled usage.

Installation

npm install @bloomkit/react

Usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@bloomkit/react";
 
const [open, setOpen] = useState(false);
 
<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger>Show details</CollapsibleTrigger>
  <CollapsibleContent>
    <p>Hidden content revealed on trigger.</p>
  </CollapsibleContent>
</Collapsible>

Uncontrolled

Omit open and onOpenChange to let the component manage its own state.

<Collapsible>
  <CollapsibleTrigger className="text-sm font-medium">Toggle</CollapsibleTrigger>
  <CollapsibleContent>
    <p>Uncontrolled — manages its own open state internally.</p>
  </CollapsibleContent>
</Collapsible>

Anatomy

<Collapsible>          {/* root — manages open state */}
  <CollapsibleTrigger> {/* toggle button */}
  <CollapsibleContent> {/* content shown when open */}
</Collapsible>

Collapsible Props

Prop	Type	Default	Description
open	boolean	—	Controlled open state
onOpenChange	(open: boolean) => void	—	Called when the open state should change
defaultOpen	boolean	false	Initial open state for uncontrolled usage
disabled	boolean	false	Prevents the collapsible from being toggled
className	string	—	Extra Tailwind classes

CollapsibleTrigger Props

Renders a <button>. Style it directly via className.

Prop	Type	Default	Description
className	string	—	Extra Tailwind classes

CollapsibleContent Props

Prop	Type	Default	Description
className	string	—	Extra Tailwind classes

PreviousCheckboxComponents

NextDate PickerComponents