120k
New

Collapsible

PreviousNext

An interactive component which expands/collapses a panel.

Installation

pnpm dlx shadcn@latest add @force-ui-vue/collapsible

Usage

<script setup lang="ts">
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
</script>
 
<template>
  <Collapsible>
    <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
    <CollapsibleContent>
      Yes. Free to use for personal and commercial projects. No attribution
      required.
    </CollapsibleContent>
  </Collapsible>
</template>

Composition

Use the following composition to build a Collapsible:

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Controlled State

Use the v-model:open directive to control the state.

<script setup lang="ts">
import { ref } from "vue"
 
const open = ref(false)
</script>
 
<template>
  <Collapsible v-model:open="open">
    <CollapsibleTrigger>Toggle</CollapsibleTrigger>
    <CollapsibleContent>Content</CollapsibleContent>
  </Collapsible>
</template>

Examples

Basic

Settings Panel

Use a trigger button to reveal additional settings.

File Tree

Use nested collapsibles to build a file tree.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Radix UI documentation for more information.