Skip to content

Collapsible

An interactive component which expands/collapses a panel.
@peduarte starred 3 repos
@radix-vue/radix-vue
vue
<script setup lang="ts">
import { ref } from 'vue'
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
import { Icon } from '@iconify/vue'

const open = ref(false)
</script>

<template>
  <CollapsibleRoot v-model:open="open" class="w-[300px]">
    <div style="display: flex; align-items: center; justify-content: space-between">
      <span class="text-white text-[15px] leading-[25px]"> @peduarte starred 3 repos </span>
      <CollapsibleTrigger
        class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-grass11 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-green3 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
      >
        <Icon v-if="open" icon="radix-icons:cross-2" class="h-3.5 w-3.5" />
        <Icon v-else icon="radix-icons:row-spacing" class="h-3.5 w-3.5" />
      </CollapsibleTrigger>
    </div>

    <div class="bg-white rounded mt-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
      <span class="text-grass11 text-[15px] leading-[25px]">@radix-vue/radix-vue</span>
    </div>

    <CollapsibleContent class="data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden">
      <div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
        <span class="text-grass11 text-[15px] leading-[25px]">@vuejs/core</span>
      </div>
      <div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
        <span class="text-grass11 text-[15px] leading-[25px]">@radix-ui/primitives</span>
      </div>
    </CollapsibleContent>
  </CollapsibleRoot>
</template>

Features

  • Full keyboard navigation.
  • Can be controlled or uncontrolled.

Installation

Install the component from your command line.

bash
npm install radix-vue

Anatomy

Import the components and piece the parts together.

vue
<script setup>
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
</script>

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

API Reference

Root

Contains all the parts of a collapsible

PropTypeDefault
asChild
boolean
false
defaultOpen
boolean
open
boolean
disabled
boolean
EmitType
@update:open
(value: boolean) => void
Data AttributeValue
[data-state]"open" | "closed"
[data-disabled]Present when disabled

Trigger

The button that toggles the collapsible

PropTypeDefault
asChild
boolean
false
Data AttributeValue
[data-state]"open" | "closed"
[data-disabled]Present when disabled

Content

The component that contains the collapsible content.

PropTypeDefault
asChild
boolean
false
forceMount
boolean
Data AttributeValue
[data-state]"open" | "closed"
[data-disabled]Present when disabled
CSS VariableDescription
--radix-collapsible-content-width
The width of the content when it opens/closes
--radix-collapsible-content-height
The height of the content when it opens/closes

Examples

Animating content size

Use the --radix-collapsible-content-width and/or --radix-collapsible-content-height CSS variables to animate the size of the content when it opens/closes. Here's a demo:

vue
// index.vue
<script setup>
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
import './styles.css'
</script>

<template>
  <CollapsibleRoot>
    <CollapsibleTrigger></CollapsibleTrigger>
    <CollapsibleContent class="CollapsibleContent">

    </CollapsibleContent>
  </CollapsibleRoot>
</template>
css
/* styles.css */
.CollapsibleContent {
  overflow: hidden;
}
.CollapsibleContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}
.CollapsibleContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-collapsible-content-height);
  }
  to {
    height: 0;
  }
}

Accessibility

Adheres to the Disclosure WAI-ARIA design pattern.

Keyboard Interactions

KeyDescription
Space
Opens/closes the collapsible
Enter
Opens/closes the collapsible