Components / Layout

Collapsible

A controlled or uncontrolled disclosure region with native trigger semantics.

Preview

Owner: Ana Martins
Status: In review
Updated: 12 min ago

Use cases

Optional details

Hide secondary metadata until someone asks to inspect it.

Compact filters

Let readers open advanced filters without leaving the page.

Usage example

Vue

<Collapsible default-open>
  <CollapsibleTrigger>Project details</CollapsibleTrigger>
  <CollapsibleContent>
    <dl>
      <div><dt>Owner</dt><dd>Ana Martins</dd></div>
      <div><dt>Status</dt><dd>In review</dd></div>
      <div><dt>Updated</dt><dd>12 min ago</dd></div>
    </dl>
  </CollapsibleContent>
</Collapsible>

More examples

Project details

Use the default-open state for information that usually matters.

Project details

<script setup lang="ts">
import Collapsible from './components/ui/collapsible/Collapsible.vue'
import CollapsibleContent from './components/ui/collapsible/CollapsibleContent.vue'
import CollapsibleTrigger from './components/ui/collapsible/CollapsibleTrigger.vue'
</script>

<template>
  <Collapsible default-open><CollapsibleTrigger>Project details</CollapsibleTrigger>
    <CollapsibleContent><p>Owner: Ana Martins</p><p>Status: In review</p></CollapsibleContent>
  </Collapsible>
</template>

Controlled filters

Use the open model when another control also changes disclosure state.

Controlled filters

<script setup lang="ts">
import { ref } from 'vue'
import Collapsible from './components/ui/collapsible/Collapsible.vue'
import CollapsibleContent from './components/ui/collapsible/CollapsibleContent.vue'
import CollapsibleTrigger from './components/ui/collapsible/CollapsibleTrigger.vue'
const open = ref(false)
</script>

<template>
  <Collapsible v-model:open="open"><CollapsibleTrigger>Advanced filters</CollapsibleTrigger>
    <CollapsibleContent><label>Owner <input name="owner" /></label></CollapsibleContent>
  </Collapsible>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Collapsible
Name	Type	Default or requirement
`v-model:open / defaultOpen`	boolean	false
`disabled`	boolean	false

Trigger and content have stable ARIA relationships. Closed content remains inert and the transition respects reduced motion.

Implementation notes

Put only secondary information in a closed disclosure; primary actions should stay visible.
Use v-model:open when the rest of the application must observe or change disclosure state.

Accessibility and localization

The trigger has a stable relationship to its content, and closed content is inert.