Components

Collapsible

Headless disclosure primitive — a single region that expands and collapses.

Overview

Collapsible is a headless @vyui/core primitive for a single show/hide region toggled by a trigger. It is the one-region building block that the Accordion composes for multiple coordinated sections.

This is a layer of @vyui/core — behavior only. For a styled multi-section disclosure, use VyAccordion from @vyui/kit.

Anatomy

<CollapsibleRoot>
  <CollapsibleTrigger />
  <CollapsibleContent />
</CollapsibleRoot>

Usage

<script setup lang="ts">
import {
  CollapsibleContent,
  CollapsibleRoot,
  CollapsibleTrigger,
} from '@vyui/core'

const open = ref(false)
</script>

<template>
  <CollapsibleRoot v-model:open="open">
    <CollapsibleTrigger>
      <text>{{ open ? 'Hide details' : 'Show details' }}</text>
    </CollapsibleTrigger>
    <CollapsibleContent>
      <view class="p-4">
        <text>Collapsible body content.</text>
      </view>
    </CollapsibleContent>
  </CollapsibleRoot>
</template>

Features and behavior

open / v-model:open controls the state; defaultOpen seeds uncontrolled state.
disabled prevents the trigger from toggling.
unmountOnHide (default true) removes the content from the rendered tree when closed.
CollapsibleTrigger reflects the open state through a data/ui state hook for styling.

API

`CollapsibleRoot`

Prop	Default	Type
`as`	—	`AsTag \| Component \| undefined` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`	—	`boolean \| undefined` Change the default rendered element for the one passed as a child, merging their props and behavior. Use this when you need a component to render through a child element while keeping the primitive's props and behavior.
`defaultOpen`	`false`	`boolean \| undefined` The open state of the collapsible when it is initially rendered. <br> Use when you do not need to control its open state.
`disabled`	—	`boolean \| undefined` When `true`, prevents the user from interacting with the collapsible.
`open`	`undefined`	`boolean \| undefined` The controlled open state of the collapsible. Can be bound with `v-model`.
`unmountOnHide`	`true`	`boolean \| undefined` When `true`, the element will be unmounted on closed state.

Event	Payload
`update:open`	`[value: boolean]`

`CollapsibleTrigger`

Prop	Default	Type
`as`	`"view"`	`AsTag \| Component \| undefined` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`	—	`boolean \| undefined` Change the default rendered element for the one passed as a child, merging their props and behavior. Use this when you need a component to render through a child element while keeping the primitive's props and behavior.

`CollapsibleContent`

Prop	Default	Type
`as`	—	`AsTag \| Component \| undefined` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`	—	`boolean \| undefined` Change the default rendered element for the one passed as a child, merging their props and behavior. Use this when you need a component to render through a child element while keeping the primitive's props and behavior.
`forceMount`	—	`boolean \| undefined`

Accessibility

The trigger exposes native button semantics and announces collapsed / expanded.
A disabled trigger is announced as disabled.
Keep the trigger label descriptive of the region it controls.

Accordion — multiple collapsible sections with single/multiple selection.
Tabs — switch between persistent peer panels instead of toggling one.

Checkbox

A checkbox with checked, unchecked, and indeterminate states, plus label and description.

Dialog

Headless modal/non-modal dialog primitive — trigger, portal, overlay, and content with full focus and dismiss behavior.