Skip to content

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

Free

Text-only Collapsible for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not remember that Settings was expanded.

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="flex w-full max-w-lg flex-col gap-2">
  <div class="flex items-center gap-2">
    <h4 class="font-semibold text-sm">Settings</h4>
    <CollapsibleTrigger
      aria-label="Expand settings"
      class="text-muted-foreground text-sm underline-offset-4 hover:underline"
    >
      [expand]
    </CollapsibleTrigger>
  </div>
  <CollapsibleContent class="flex flex-col gap-2">
    <div
      v-for="option in options"
      class="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