BridgeHandbookDraft
For agents
Menu
ExperimentalmoleculeData display

Collapsible

A section people open and close, for what most people don't need most of the time.

import { … } from "@brdgapp/ui/components/collapsible"

Usage

Collapsible is a section people open and close. Use it to tuck away what most people don't need most of the time: advanced settings, a history, extra detail. It comes in two looks: section, a heading with an arrow on the right, and inline, a small arrow before a line of words. It slides open, so what's below moves smoothly. The usual mistake is hiding something people need to finish the task.

When to use

  • Rarely used or risky settings under “Advanced”, like disconnecting an account.
  • A history or list that's useful sometimes: “History on this list”, “Earlier meetings”.
  • Extra detail on a row or card that most people skip.

When not to use

  • For anything people need to finish the task. Show it.
  • To shorten a long bio or description. Use ExpandableBio, which shows the first lines. Use ExpandableBio instead.
  • To switch between views of the same content. Use Tabs instead.
  • For a menu of actions. Use ActionMenu instead.

The look comes from props

A component's appearance comes only from its own options (variant, size, color). className on a package component is for layout (mt-4, shrink-0, w-full), never for font size, color, padding, radius or hover. If the look needs a className, the component or the chosen option is wrong: fix that instead.

Anatomy

Leah Okonkwo · Sep 12

  1. Trigger. A button. section: 13px bold --text-primary, full width. inline: 13px medium --text-secondary, as wide as its words.

  2. Arrow. 16px, --text-muted. section: a down arrow on the right that flips up when open. inline: a right arrow before the words that turns down.

  3. Count. Optional, section only. 12px --text-muted before the arrow: how many items are inside.

  4. Content. What opens. It slides open and shut in 200ms. Its spacing is set where it's used (pt-3).

Examples

Tucking away a risky action

Open Advanced. The section slides open; the rare, risky action waits inside.

ana@lanternfield.example

Google · contacts and calendar syncing

A section with a count

The count says how much is inside before anyone opens it.

  • Jonas Becker and Hannah WeissYesterday
  • Fatima Al-Sayed and Isabella Rossi2 days ago
  • Priya Natarajan and Leah Okonkwo4 days ago
  • Kwame Asante and Leah Okonkwo6 days ago
  • Mei Lin Zhou and Ravi MenonSep 2

A line inside a card

The inline look: a small arrow before the words, for detail inside a block.

Saltmarsh Partners

On your Climate seed list · Intro requested

States

RestHoverFocusDisabled
Section, closed
Section, open
Inline, closed
Inline, open
StateWhat happens
ClosedArrow points down (section) or right (inline). The content isn't on the page.
OpenArrow points up or down. The content shows.
Hoversection: the arrow darkens. inline: the words darken.
FocusA soft blue ring around the trigger.
Disabled50% opacity; can't be opened.

Behavior

  • Closed by default. defaultOpen starts it open; open and onOpenChange let the screen hold the state.
  • Slides open and shut in 200ms. With reduced motion it opens at once.
  • While closed, the content isn't in the page, so screen readers and Tab skip it.
  • className is for layout only. Never a size or color.

Do and don't

Do

Name the trigger for what's inside: “Advanced”, “History on this list”.

Don't

Name it for the action: “Click to expand”, “Show more”.

Do

Use section for a heading over a block, inline for a line inside a block.

Don't

Mix both looks in one list.

Do

Tuck away a rare, risky action, like Disconnect account.

Don't

Tuck away the main thing people came to do.

Content

  • The trigger names what's inside, in sentence case: “Advanced”, “History on this list”, “Earlier meetings”.

Accessibility

  • The trigger is a real button that says whether it's open (aria-expanded) and which content it opens.
  • Space and Enter open and close it.
  • The arrow is decoration and hidden from screen readers; the open state is announced.
KeysAction
EnterSpaceOpens or closes it.
TabMoves into the content when it's open, or past it when it's closed.

API reference

Collapsible

Holds whether it's open. Extends Base UI Collapsible.Root props.

PropTypeDefaultDescription
defaultOpenbooleanfalseStart open.
openboolean—Open or not, when the screen holds the state.
onOpenChange(open: boolean) => void—Called when it opens or closes.
disabledbooleanfalseCan't be opened.

CollapsibleTrigger

The button that opens and closes it.

PropTypeDefaultDescription
variant"section" | "inline""section"A heading with the arrow on the right, or a line with the arrow before it.
countnumber—section only: how many items are inside.
childrenReactNode—The words: what's inside.
classNamestring—Layout only.

CollapsibleContent

What opens.

PropTypeDefaultDescription
classNamestring—Layout only: pt-3, pl-5.

Lineage

What it's built from and where it's used, read from the code. When you change it, check these too.

Built from
Nothing else in the package
Used by components
None
Used in patterns
None
Used in templates
None