Collapsible card

Migration

Same props, same defaults, same behavior — the component was renamed onto a Radix primitive. Swap the name (and the import); nothing else changes.

// Before
import { CollapsibleCard } from '@brikdesigns/bds';

<CollapsibleCard sectionLabel="Section 01" title="Overview and Goals">
  <p>Content goes here…</p>
</CollapsibleCard>

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

<Collapsible sectionLabel="Section 01" title="Overview and Goals">
  <p>Content goes here…</p>
</Collapsible>

Every prop (title, children, sectionLabel, isOpen, onOpenChange, defaultOpen, headerActions) carries over unchanged. See the Collapsible Storybook playground for the current component.

The reference below documents the frozen CollapsibleCard API for migration. New code should use Collapsible.

CollapsibleCard combines Accordion's expand/collapse behavior with Card's container styling. Use for FAQs and proposal sections that benefit from both individual emphasis and progressive disclosure.

For tight FAQ lists where individual cards would be visual overhead, use Accordion directly. For non-collapsible card content, use Card.

Use it for

• Long-form proposal sections (Section 01 / Section 02 / Section 03)
• FAQ entries that need standalone visual weight
• Settings groups inside dashboards
• Stacked content blocks where each is meaningful enough to be its own surface

Import

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

Variants

Default

Click the header to toggle. Internal state.

<CollapsibleCard
  sectionLabel="Section 01"
  title="Overview and Goals"
>
  <p>Content goes here…</p>
</CollapsibleCard>

Initially open

<CollapsibleCard title="Settings" defaultOpen>
  <p>Settings content…</p>
</CollapsibleCard>

Controlled

When you need parent control over expansion (e.g. accordion-style "only one open" coordination across multiple cards).

import { useState } from 'react';

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

<CollapsibleCard
  title="Pricing"
  isOpen={open}
  onOpenChange={setOpen}
>
  <p>Pricing details…</p>
</CollapsibleCard>

Without section label

sectionLabel is optional. Drop it for FAQ-style cards where numbered sections aren't meaningful.

<CollapsibleCard title="Do you offer discounts for nonprofits?">
  <p>Yes — 20% off all annual plans for verified 501(c)(3) organizations.</p>
</CollapsibleCard>

Header actions

headerActions accepts ReactNode rendered next to the toggle — useful for per-card edit / share / dismiss buttons.

<CollapsibleCard
  title="Project brief"
  headerActions={<IconButton icon={<EditIcon />} label="Edit brief" />}
>
  <p>...</p>
</CollapsibleCard>

When not to use

• Don't use CollapsibleCard when content shouldn't be hidden. If users need to see the content to make a decision, render it directly in a Card without the collapse.
• Don't use CollapsibleCard for navigation. It's content disclosure, not navigation. Use TabBar / SidebarNavigation for navigation.

Accessibility

• The header is a real <button> with aria-expanded reflecting open/closed state.
• The content panel uses role="region" linked via aria-labelledby to the header.
• Keyboard Enter / Space toggles. Focus stays on the header after toggling.

API

Plus standard <div> HTML attributes.

Related

• Accordion — for tight FAQ stacks
• Card — non-collapsible card sibling
• CardList — wrapper for stacking multiple CollapsibleCards
• Storybook playground