Collapsible

Collapsible is a single expandable section: a clickable header (optional section label + title + +/− toggle) that reveals its content. It wraps @radix-ui/react-collapsible, so aria-expanded, keyboard activation, and focus management are correct out of the box. It supports uncontrolled (defaultOpen) and controlled (isOpen + onOpenChange) modes.

Use it for

• A single expandable section — details, an optional form step, supplementary content
• Progressive disclosure where one region opens independently
• Section shells with a label + title header and inline header actions

Import

import { Collapsible } from '@brikdesigns/bds';

Variants

Uncontrolled

title is the header (required); children is the revealed content. defaultOpen sets the initial state and the component manages the rest.

<Collapsible sectionLabel="Section 01" title="Overview and Goals" defaultOpen>
  <p>Revealed content…</p>
</Collapsible>

Controlled

Drive the open state yourself with isOpen + onOpenChange — for accordion-like coordination or persisting the state.

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

<Collapsible title="Overview" isOpen={open} onOpenChange={setOpen}>
  <p>Revealed content…</p>
</Collapsible>

Header actions

headerActions renders alongside the toggle — a secondary control that sits in the header without stealing the expand click.

<Collapsible title="Attachments" headerActions={<Badge>3</Badge>}>
  {/* … */}
</Collapsible>

When not to use

• Don't reach for the deprecated CollapsibleCard. It is a stub that redirects here — use Collapsible directly.

Accessibility

• Wraps @radix-ui/react-collapsible, so the trigger carries aria-expanded and the content region is correctly associated; Space / Enter toggle and focus is managed for you.
• The +/− toggle glyph is aria-hidden — expanded state is announced via aria-expanded, not the icon.
• The title renders as an <h3>; keep the surrounding heading hierarchy consistent.

API

Plus all standard <div> HTML attributes.

Related

• Accordion — multiple sections with single-open coordination
• Collapsible card — deprecated predecessor (redirects here)
• Storybook playground