Collapsible

SCollapsible is an expandable block: a trigger header controls the visibility of the content. It is built on Reka UI (aria-expanded, aria-controls, keyboard control). The chevron is a reusable SIcon that rotates in the open state. Two-way binding of the open state uses v-model:open.

Basic usage

Open by default

Indicator icon

The expand-icon prop sets the expand indicator icon (a registry name, chevron-right here).

Disabled

The disabled prop locks the trigger, so the block can be neither expanded nor collapsed.

Trigger slot

The #trigger slot replaces the title prop, so the header can hold an icon or custom markup.

Header colors

The header color and background come from the --s-collapsible-trigger-bg and --s-collapsible-trigger-color tokens (the latter also sets the chevron color). Dark or accent headers are common in mockups, so they do not need a rule with higher specificity:

<template>
  <SCollapsible
    class="panel"
    title="Dimensions and weight"
  >
    Length, width, height, and weight of each package.
  </SCollapsible>
</template>

<style>
.panel {
  --s-collapsible-trigger-bg: var(--s-gray-600);
  --s-collapsible-trigger-color: var(--s-white);
}
</style>

API

Props

Name	Type	Default	Description
title	string	undefined	Trigger title (an alternative to the trigger slot).
square	boolean	undefined	Square corners: removes the border radius (rounded by default).
disabled	boolean	false	Prevents expanding and disables the trigger.
expand-icon	string	"chevron-down"	Icon of the expand indicator.
open	boolean	false	Whether the content is expanded. Two-way bound via v-model:open.

Events

Name	Signature	Description
update:open	(value: boolean) => void	Emitted when open changes. Used for two-way binding (v-model:open).

Slots

Name	Description
trigger	Custom trigger content (instead of the title prop).
default	Collapsible content.