Collapsible

An expand-and-collapse panel.

Learn how type is set — choosing a type scale, tuning leading, and spacing letters with tracking so text reads cleanly.

<script setup lang="ts">
import { Collapsible } from '@shardsui/vue/collapsible'
</script>

<template>
  <Collapsible.Root class="flex w-72 flex-col text-sm">
    <p class="m-0 text-gray-600">
      Learn how type is set — choosing a type scale, tuning leading, and spacing letters with
      tracking so text reads cleanly.
    </p>
    <Collapsible.Panel
      class="h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0"
    >
      <p class="m-0 pt-2 text-gray-600">
        Build a modular type scale, balance leading against line length, and match x-heights when
        pairing typefaces.
      </p>
    </Collapsible.Panel>
    <Collapsible.Trigger
      v-slot="{ open }"
      class="mt-3 self-center rounded-xs text-sm font-medium text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950"
    >
      {{ open ? 'Show less' : 'Show more' }}
    </Collapsible.Trigger>
  </Collapsible.Root>
</template>

Anatomy

<script setup>
import { Collapsible } from '@shardsui/vue/collapsible'
</script>

<template>
  <Collapsible.Root>
    <Collapsible.Trigger />
    <Collapsible.Panel />
  </Collapsible.Root>
</template>

API reference

Root

Groups all parts of the collapsible. Renders a <div> element.

Prop	Type	Default
`as`	`keyof HTMLElementTagNameMap`	`'div'`

`class`	`string`	—

`style`	`string`	—

`open`	`boolean`	`false`

`update:open`	`(open: boolean) => void`	—

`disabled`	`boolean`	`false`

`default`	`Slot<{ open, disabled, transitionStatus }>`	—

Attribute	Description
`data-open`	Present when the collapsible panel is open.
`data-closed`	Present when the collapsible panel is closed.
`data-disabled`	Present when the collapsible is disabled.
`data-starting-style`	Present when the panel is animating in.
`data-ending-style`	Present when the panel is animating out.

Trigger

A button that opens and closes the collapsible panel. Renders a <button> element.

Prop	Type	Default
`as`	`keyof HTMLElementTagNameMap`	`'button'`

`class`	`string`	—

`style`	`string`	—

`disabled`	`boolean`	—

`default`	`Slot<{ open, disabled, transitionStatus }>`	—

Attribute	Description
`data-panel-open`	Present when the collapsible panel is open.
`data-disabled`	Present when the collapsible is disabled.
`data-starting-style`	Present when the panel is animating in.
`data-ending-style`	Present when the panel is animating out.

Panel

A panel with the collapsible contents. Renders a <div> element.

Prop	Type	Default
`as`	`keyof HTMLElementTagNameMap`	`'div'`

`class`	`string`	—

`style`	`string`	—

`id`	`string`	auto

`hiddenUntilFound`	`boolean`	`false`

`keepMounted`	`boolean`	`false`

`default`	`Slot<{ open, disabled, transitionStatus }>`	—

Attribute	Description
`data-open`	Present when the panel is open.
`data-closed`	Present when the panel is closed.
`data-disabled`	Present when the collapsible is disabled.
`data-starting-style`	Present when the panel is animating in.
`data-ending-style`	Present when the panel is animating out.

CSS Variable	Description
`--collapsible-panel-height`	The panel's computed height.
`--collapsible-panel-width`	The panel's computed width.