Collapsible

An interactive component which expands/collapses a panel.

View code

@zernonia starred 3 repos

@unovue/reka-ui

Features

Full keyboard navigation.
Can be controlled or uncontrolled.

Installation

Install the component from your command line.

$ 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

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten 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.

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

Slots (default)	Payload
`open`	`boolean` Current open state

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

Trigger

The button that toggles the collapsible

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten 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 Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

Content

The component that contains the collapsible content.

tip

Built with Presence component - supports any animation techniques while maintaining access to presence emitted events.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten 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.

Emit	Payload
`contentFound`	`[(void)?]`

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

CSS Variable	Description
`--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;  } }

Render content even when collapsed

By default hidden content will be removed, use :unmountOnHide="false" to keep the content always available.

This will also allow browser to search the hidden text, and open the collapsible.

vue

<script setup> import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui' </script>  <template>  <CollapsibleRoot :unmount-on-hide="false">  …  </CollapsibleRoot> </template>

Accessibility

Adheres to the Disclosure WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
`Space`	Opens/closes the collapsible
`Enter`	Opens/closes the collapsible

Collapsible ​

Features ​

Installation ​

Anatomy ​

API Reference ​

Root ​

Trigger ​

Content ​

Examples ​

Animating content size ​

Render content even when collapsed ​

Accessibility ​

Keyboard Interactions ​