Navigation

Collapsible

Simple show/hide disclosure: a trigger button toggles the visibility of its content region.

Import

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@zephora/react";

Examples

Basic

Added dark mode
Fixed focus ring on Safari

<Collapsible defaultOpen>
  <CollapsibleTrigger>Toggle changelog</CollapsibleTrigger>
  <CollapsibleContent>
    <ul>
      <li>Added dark mode</li>
      <li>Fixed focus ring on Safari</li>
    </ul>
  </CollapsibleContent>
</Collapsible>

Controlled

Control the open state with `open` + `onOpenChange`.

const [open, setOpen] = React.useState(false);

<Button size="sm" onClick={() => setOpen((o) => !o)}>
  {open ? "Hide" : "Show"} details
</Button>
<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger>Details</CollapsibleTrigger>
  <CollapsibleContent>Rendered while open.</CollapsibleContent>
</Collapsible>

API

Collapsible props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`disabled`	`boolean`	`false`	Disables the trigger (inherited by CollapsibleTrigger).
`unstyled`	`boolean`	`false`	Headless mode — inherited by all parts.

CollapsibleTrigger props

Prop	Type	Default	Description
`disabled`	`boolean`	—	Overrides the disabled state inherited from the root.
`…rest`	`ButtonHTMLAttributes<HTMLButtonElement>`	—	All native button props are forwarded.

CollapsibleContent props

Prop	Type	Default	Description
`…rest`	`HTMLAttributes<HTMLDivElement>`	—	All native div props are forwarded; hidden while closed.

Keyboard

Key	Action
`Enter / Space`	Toggles the disclosure from the trigger.