Collapsible

<Collapsible> is the lowest-level disclosure primitive — one trigger, one content block. Use when there’s no list of items (which would be Accordion).

import from "@na/ui/components/collapsible" ▶ Open in Storybook packages/ui/src/components/collapsible.tsx

When to use

• A single “Show advanced options” toggle.
• A single details/summary-style affordance inside a row.

Don’t use Collapsible for: a list of disclosable items (use Accordion), tooltips (Tooltip), or modal-like content (Dialog / Popover).

Default

Show advanced options

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

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger asChild>
    <Button variant="outline" size="sm">
      {open ? 'Hide' : 'Show'} advanced options
    </Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    Body that expands and collapses.
  </CollapsibleContent>
</Collapsible>

API

Prop	Type	Default	Description
open	boolean	—	Controlled. Pair with onOpenChange.
defaultOpen	boolean	false	Initial state for uncontrolled mode.
onOpenChange	(open: boolean) => void	—	Fires on toggle.
disabled	boolean	false	Trigger disabled.

CollapsibleTrigger accepts asChild (Radix Slot) to project the trigger semantics onto a Button.

Design guidelines

✓ Do

• Update the trigger label between states ("Show" / "Hide"). Static labels lie about what clicking does.
• Use Collapsible for opt-in disclosure of secondary content.

✗ Don't

• Use Collapsible to hide errors or warnings. Critical state is not "secondary."
• Nest Collapsibles. If you need a list of disclosures, use Accordion.

Accessibility

• Composes Radix Collapsible — trigger is a <button aria-expanded aria-controls>, content is a labeled region.
• Animations are user-preferred-motion-aware (respects prefers-reduced-motion).

Related

• Accordion — List of disclosures.
• CollapsibleSection — Titled-section flavor for settings.

▶ Open Collapsible stories in Storybook