Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Outline

Dashed Outline Collapsible for React

A dashed-outline box of optional configuration that expands to two option rows.

Framework
UI library

A dashed outline says this part is optional. The Optional Configuration header ends with a muted [expand] cue, and the content, under a dashed divider, lists two options and their state. Use it for advanced settings that most people can skip.

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

FAQ

Which parts use the dashed border?

Collapsible has rounded-lg border-2 border-dashed, and CollapsibleContent uses border-t-2 border-dashed, so the line above the options is dashed too.

What toggles Optional Configuration?

The whole header. The trigger is w-full, with the title and a muted [expand] cue in text-xs. That cue is part of the button's name.

How are Option A and Option B laid out?

They come from the options list at the top of the file, in a flex flex-col gap-3 column. Each row is flex items-center justify-between: the label in the muted color, the state at the end.

How do I start Optional Configuration open?

Set defaultOpen on Collapsible.

It starts closed.

How do I open it from the keyboard?

Tab reaches the trigger, a button named Optional Configuration [expand], and Space or Enter toggles the options.

If I put fields in the options, do they stay mounted while closed?

Yes, it stays mounted and hidden, so fields inside it still submit.

All 23 collapsible examples