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: 'edit', unified: true },
      { type: 'tertiary-default', size: 'sm', icon: 'delete', 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
labelHelper	string	Optional helper text displayed next to the label in parentheses
modelValue	boolean	Controls the expanded/collapsed state (for v-model support)
defaultExpanded	boolean = true	Default expanded state when not controlled
divider	boolean = false	Whether to show a divider between header and content
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
#buttons	{}
#default	{}