Collapsible Section

Experimental

An interactive component which expands/collapses a panel.

<script setup lang="ts">
import { HCollapsibleSection } from '@holistics/design-system'
</script>
<template>
  <HCollapsibleSection
    label="Section Title"
    :default-expanded="true"
    label-helper="42"
    :buttons="[
      { type: 'tertiary-default', size: 'sm', icon: 'copy', unified: true },
      { type: 'tertiary-default', size: 'sm', icon: 'pencil', unified: true },
      { type: 'tertiary-default', size: 'sm', icon: 'trash-alt', unified: true }
    ]"
  >
    <p class="text-sm text-gray-700">
      This is the content of the collapsible section. It can contain any content you want.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua.
    </p>
  </HCollapsibleSection>
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
label *	string	The label of the collapsible section
size	CollapsibleSectionSize = "md"	The size of the collapsible section (affects body padding)
labelHelper	string	Optional helper text displayed next to the label in parentheses
icon	"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add" | "address-card" | "adhoc-query" | "ai/file" | ... 448 more ...	Optional icon to display on the left of the label
modelValue	boolean	Controls the expanded/collapsed state (for v-model support)
defaultExpanded	boolean = true	Default expanded state when not controlled
divider	boolean	Whether to show a divider at the bottom of the section
buttons	[(ButtonPropsWithOnClick)?, (ButtonPropsWithOnClick)?, (ButtonPropsWithOnClick)?]	Array of up to 3 buttons to display in the header

Events

Name	Parameters	Description
@update:modelValue	[value: boolean]

Slots

Name	Scoped	Description
#icon	{}
#label	{}
#buttons	{}
#default	{}