Reka UI logoReka
backdrop
Examples
Components

Collapsible

An interactive component which expands/collapses a panel.
@zernonia starred 3 repos
@unovue/reka-ui

Features

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

Installation

Install the component from your command line.

sh
$ npm add reka-ui

Anatomy

Import the components and piece the parts together.

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

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

API Reference

Root

Contains all the parts of a collapsible

PropDefaultType
as
'div'
AsTag | Component

The element or component this component should render as. Can be overwrite by asChild

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

defaultOpen
false
boolean

The open state of the collapsible when it is initially rendered.
Use when you do not need to control its open state.

disabled
boolean

When true, prevents the user from interacting with the collapsible.

open
boolean

The controlled open state of the collapsible. Can be binded with v-model.

unmountOnHide
true
boolean

When true, the element will be unmounted on closed state.

EmitPayload
update:open
[value: boolean]

Event handler called when the open state of the collapsible changes.

Slots (default)Payload
open
boolean

Current open state

Data AttributeValue
[data-state]"open" | "closed"
[data-disabled]Present when disabled

Trigger

The button that toggles the collapsible

PropDefaultType
as
'button'
AsTag | Component

The element or component this component should render as. Can be overwrite by asChild

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

Data AttributeValue
[data-state]"open" | "closed"
[data-disabled]Present when disabled

Content

The component that contains the collapsible content.

PropDefaultType
as
'div'
AsTag | Component

The element or component this component should render as. Can be overwrite by asChild

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

forceMount
boolean

Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Data AttributeValue
[data-state]"open" | "closed"
[data-disabled]Present when disabled
CSS VariableDescription
--reka-collapsible-content-width
The width of the content when it opens/closes
--reka-collapsible-content-height
The height of the content when it opens/closes

Examples

Animating content size

Use the --reka-collapsible-content-width and/or --reka-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 'reka-ui'
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(--reka-collapsible-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--reka-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