Preview

Installation

npx sigma-ui@latest add 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.
    </CollapsibleContent>
  </Collapsible>
</template>

• Use v-model:open to control the open state, or defaultOpen to open it initially.
• Use as-child on <CollapsibleTrigger> to render your own button as the trigger.

Examples

Basic

A list that shows its first item and reveals the rest with an icon button, controlled through v-model:open.

API Reference

Collapsible

Props

Prop	Type	Default
defaultOpen The open state of the collapsible when it is initially rendered. <br> Use when you do not need to control its open state.	boolean	-
open The controlled open state of the collapsible. Can be binded with v-model.	boolean	-
disabled When true, prevents the user from interacting with the collapsible.	boolean	-
unmountOnHide When true, the element will be unmounted on closed state.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Events

Event	Payload
update:open Event handler called when the open state of the collapsible changes.	[value: boolean]

Slots

Slot	Scope
default The content of the component.	{ open: boolean; }

CollapsibleTrigger

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

CollapsibleContent

Props

Prop	Type	Default
forceMount Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Adheres to the Disclosure WAI-ARIA design pattern. Reka UI sets aria-expanded and aria-controls on the trigger.

Key	Description
Space	Opens or closes the collapsible.
Enter	Opens or closes the collapsible.