Skip to content

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

Free

Dashed Outline Collapsible for Svelte

A dashed Optional Configuration box that opens to Option A set to Enabled and Option B set to Disabled.

UI library: Ark UI

A dashed box titled Optional Configuration, with a muted expand cue in brackets. Inside, Option A reads Enabled and Option B reads Disabled.

Use it for advanced settings most people can skip. If those options should always show, put them in a Card. In Svelte, Ark UI does not save whether the box was open.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Collapsible anatomy: root, trigger, indicator, content

Usage

<Collapsible class="w-full max-w-lg rounded-lg border-2 border-dashed"><CollapsibleTrigger class="flex w-full items-center justify-between p-4 font-medium text-sm">Optional Configuration<span class="text-muted-foreground text-xs">[expand]</span></CollapsibleTrigger><CollapsibleContent class="border-t-2 border-dashed"><div class="flex flex-col gap-3 p-4 text-sm">{#each options as option (option.label)}<div class="flex items-center justify-between"><span class="text-muted-foreground">{option.label}</span><span>{option.value}</span></div>{/each}</div></CollapsibleContent></Collapsible>

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, by default the content stays mounted and hidden, so fields inside it still submit. Set lazyMount to render it on first open, or unmountOnExit to remove it when it closes.

API Reference

Collapsible

No extra props in this demo. The rest is on the Collapsible page.

All 23 collapsible examples