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>

Examples

Custom buttons slot

Use the buttons slot to add custom controls like a switch.

<script setup lang="ts">
import { ref } from 'vue'
import { HCollapsibleSection, HSwitch } from '@holistics/design-system'

const isEnabled = ref(true)
</script>
<template>
  <HCollapsibleSection
    label="Section Title"
    :default-expanded="true"
  >
    <template #buttons>
      <HSwitch v-model="isEnabled" />
    </template>
    <p class="text-sm text-gray-700">
      This section uses a custom buttons slot to display a switch control.
      The switch can be used to enable/disable the section content.
    </p>
  </HCollapsibleSection>
</template>

Long title

Long titles will wrap to a new line when the container is not wide enough.

<script setup lang="ts">
import { HCollapsibleSection } from '@holistics/design-system'
</script>
<template>
  <div class="max-w-md">
    <HCollapsibleSection
      label="This is a very long section title that should wrap to a new line when the container is not wide enough"
      :default-expanded="true"
      label-helper="42"
      :buttons="[
        { type: 'tertiary-default', size: 'sm', icon: 'pencil', unified: true }
      ]"
    >
      <p class="text-sm text-gray-700">
        This example demonstrates how long titles wrap to multiple lines.
        The header layout handles long text gracefully.
      </p>
    </HCollapsibleSection>
  </div>
</template>

With divider

Use the divider prop to add a separator line between multiple sections.

<script setup lang="ts">
import { HCollapsibleSection } from '@holistics/design-system'
</script>
<template>
  <div>
    <HCollapsibleSection
      label="Section One"
      :default-expanded="true"
      divider
    >
      <p class="text-sm text-gray-700">
        Content of the first section. The divider separates this section from the next one.
      </p>
    </HCollapsibleSection>

    <HCollapsibleSection
      label="Section Two"
      :default-expanded="true"
      divider
    >
      <p class="text-sm text-gray-700">
        Content of the second section. Notice the divider line between sections.
      </p>
    </HCollapsibleSection>

    <HCollapsibleSection
      label="Section Three"
      :default-expanded="false"
    >
      <p class="text-sm text-gray-700">
        Content of the third section. This last section has no divider.
      </p>
    </HCollapsibleSection>
  </div>
</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
size	CollapsibleSectionSize = "md"	The size of the collapsible section (affects body padding)
label	string	The label of the collapsible section
labelHelper	string	Optional helper text displayed next to the label in parentheses
icon	"function" | "add-block" | "add-filter" | "add-tag" | "add" | "address-card" | "adhoc-query" | "ai/file" | "ai/generate" | "ai/mascot" | "ai/openai-black-monoblossom" | "ai/sparkle-gradient" | ... 431 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	{}