Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Text-only Collapsible for React

A Settings heading with a bracketed expand control that reveals Option 1, Option 2, and Option 3.

A Settings heading sits beside a muted expand control in brackets. It reveals Option 1, Option 2, and Option 3, each in a bordered row.

Use it on a dense settings page where a button would be too loud. If the control needs an icon, use a Button as the trigger. In React, Base UI does not remember that Settings was expanded.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Collapsible anatomy: root, trigger, indicator, content

Usage

<Collapsible className="flex w-full max-w-lg flex-col gap-2">
  <div className="flex items-center gap-2">
    <h4 className="font-semibold text-sm">Settings</h4>
    <CollapsibleTrigger
      aria-label="Expand settings"
      className="text-muted-foreground text-sm underline-offset-4 hover:underline"
    >
      [expand]
    </CollapsibleTrigger>
  </div>
  <CollapsibleContent className="flex flex-col gap-2">
    {options.map((option) => (
      <div className="rounded-md border px-4 py-2 text-sm" key={option}>
        {option}
      </div>
    ))}
  </CollapsibleContent>
</Collapsible>

FAQ

Does the Settings heading toggle the list?

No. The h4 sits beside the trigger in a flex items-center gap-2 row, and only [expand] toggles the options.

How is the expand control styled?

text-muted-foreground text-sm, with hover:underline and underline-offset-4. It has aria-label="Expand settings", so screen readers hear what it expands rather than the brackets.

How are Option 1, Option 2, and Option 3 drawn?

Each is a div with rounded-md border px-4 py-2 text-sm, from the options list at the top of the file. CollapsibleContent is a flex flex-col gap-2 column.

How do I start the options visible?

Set defaultOpen on Collapsible.

They start hidden.

How do I expand the list from the keyboard?

Tab reaches [expand], and Space or Enter toggles the options. The heading isn't a control.

How do I make the Settings heading toggle the list?

Wrap the trigger in the heading and put the Settings text inside the trigger, so the heading and the cue are one button. Then drop the aria-label, since the visible text names it.

API Reference

Collapsible

Sets aria-label="Expand settings". The rest is on the Collapsible page.

All 23 collapsible examples