Collapsible

Collapsible

Basic (Uncontrolled)

Click to expand

Default Open

Already expanded

This content is visible by default because defaultOpen is set to true.

Controlled

Open externally

Controlled collapsible

Usage

import { Collapsible } from "@f0rbit/ui";

<Collapsible trigger="Click to expand">
  <p>Hidden content revealed on click.</p>
</Collapsible>

Uncontrolled Mode

By default, Collapsible manages its own open state internally:

<Collapsible trigger="Click me">
  <p>This content toggles when you click the trigger.</p>
</Collapsible>

Default Open

Use defaultOpen to have the content visible initially:

<Collapsible trigger="Already expanded" defaultOpen>
  <p>This is visible by default.</p>
</Collapsible>

Controlled Mode

For full control over the open state, use open and onOpenChange:

const [isOpen, setIsOpen] = createSignal(false);

<Collapsible
  trigger="Controlled"
  open={isOpen()}
  onOpenChange={setIsOpen}
>
  <p>Controlled by external state.</p>
</Collapsible>

Props

Prop	Type	Default	Description
trigger	JSX.Element | string	—	Content shown in the trigger area
defaultOpen	boolean	false	Initial open state (uncontrolled)
open	boolean	—	Controlled open state
onOpenChange	(open: boolean) => void	—	Callback when open state changes