Kappa / Collapsible Section

<script setup>
import { ref } from "vue";
import { Button } from "@dicehub/kappa/components/button";
import { CollapsibleSection } from "@dicehub/kappa/components/collapsible-section";
import { Input } from "@dicehub/kappa/components/input";
import { Label } from "@dicehub/kappa/components/label";

const refinementLevel = ref("4");

const reset = () => {
  refinementLevel.value = "4";
};
</script>

<template>
  <CollapsibleSection.Root default-open>
    <CollapsibleSection.Header>
      <CollapsibleSection.Trigger>Surface refinement</CollapsibleSection.Trigger>
      <CollapsibleSection.Actions>
        <Button size="xs" variant="ghost" @click="reset">Reset</Button>
      </CollapsibleSection.Actions>
    </CollapsibleSection.Header>
    <CollapsibleSection.Content>
      <Label html-for="level">Refinement level</Label>
      <Input id="level" v-model="refinementLevel" size="sm" />
    </CollapsibleSection.Content>
  </CollapsibleSection.Root>
</template>

Installation

Collapsible Section is part of the main Kappa package. It composes the same disclosure behavior as Collapsible and adds a dense section layout.

Barrel

import {
  CollapsibleSection,
  CollapsibleSectionActions,
  CollapsibleSectionContent,
  CollapsibleSectionHeader,
  CollapsibleSectionIndicator,
  CollapsibleSectionRoot,
  CollapsibleSectionTrigger,
} from "@dicehub/kappa";

Granular

import {
  CollapsibleSection,
  CollapsibleSectionActions,
  CollapsibleSectionContent,
  CollapsibleSectionHeader,
  CollapsibleSectionIndicator,
  CollapsibleSectionRoot,
  CollapsibleSectionTrigger,
} from "@dicehub/kappa/components/collapsible-section";

Usage

Use this component for settings and inspector panels. Use Collapsible when the content needs a standalone disclosure without a section header layout.

Pressure correction uses two non-orthogonal passes.

<script setup>
import { CollapsibleSection } from "@dicehub/kappa/components/collapsible-section";
</script>

<template>
  <CollapsibleSection.Root default-open>
    <CollapsibleSection.Header>
      <CollapsibleSection.Trigger>Solver controls</CollapsibleSection.Trigger>
    </CollapsibleSection.Header>
    <CollapsibleSection.Content>
      Pressure correction uses two non-orthogonal passes.
    </CollapsibleSection.Content>
  </CollapsibleSection.Root>
</template>

Composition

Typical part hierarchy

CollapsibleSection.Root
├── CollapsibleSection.Header
│   ├── CollapsibleSection.Trigger
│   │   └── CollapsibleSection.Indicator
│   └── CollapsibleSection.Actions (optional)
└── CollapsibleSection.Content

Header keeps Trigger and Actions as siblings. This prevents buttons in Actions from changing the section state and avoids nested interactive elements.

Give Trigger a short label that describes the hidden content.
Keep Actions compact. Move complex tools into Content.
Place Header before Content so the ARIA relationship follows the visual order.

Examples

Compact

Combine the compact section with the 20px Number Input composition for dense technical panels.

Level

Buffer cells

Angle

<script setup>
import { ref } from "vue";
import { CollapsibleSection } from "@dicehub/kappa/components/collapsible-section";
import NumberInputField from "./NumberInputField.vue";

const level = ref(4);
const bufferCells = ref(3);
const featureAngle = ref(30);
</script>

<template>
  <CollapsibleSection.Root default-open size="compact">
    <CollapsibleSection.Header>
      <CollapsibleSection.Trigger>Surface refinement</CollapsibleSection.Trigger>
    </CollapsibleSection.Header>
    <CollapsibleSection.Content>
      <div class="compact-fields">
        <NumberInputField label="Level" :value="level" @change="level = $event" />
        <NumberInputField
          label="Buffer cells"
          :value="bufferCells"
          @change="bufferCells = $event"
        />
        <NumberInputField
          label="Angle"
          :value="featureAngle"
          @change="featureAngle = $event"
        />
      </div>
    </CollapsibleSection.Content>
  </CollapsibleSection.Root>
</template>

<style scoped>
.compact-fields {
  display: grid;
  gap: 0.125rem;
}
</style>

Header Actions

Place compact actions beside the trigger. Clicking an action does not change the open state.

Seven patches are configured. All required fields are valid.

Section open · Resets 0

<script setup>
import { ref } from "vue";
import { Button } from "@dicehub/kappa/components/button";
import { CollapsibleSection } from "@dicehub/kappa/components/collapsible-section";

const open = ref(true);
const resets = ref(0);

const resetBoundaries = () => {
  resets.value += 1;
};
</script>

<template>
  <CollapsibleSection.Root v-model:open="open">
    <CollapsibleSection.Header>
      <CollapsibleSection.Trigger>Boundary conditions</CollapsibleSection.Trigger>
      <CollapsibleSection.Actions>
        <Button size="xs" variant="ghost" @click="resetBoundaries">Reset</Button>
      </CollapsibleSection.Actions>
    </CollapsibleSection.Header>
    <CollapsibleSection.Content>
      Seven patches are configured.
    </CollapsibleSection.Content>
  </CollapsibleSection.Root>
</template>

Controlled

Use v-model:open when another control or application state also changes the section.

<script setup>
import { ref } from "vue";
import { Button } from "@dicehub/kappa/components/button";
import { CollapsibleSection } from "@dicehub/kappa/components/collapsible-section";

const open = ref(false);
</script>

<template>
  <Button size="sm" variant="outline" @click="open = !open">
    {{ open ? "Close diagnostics" : "Open diagnostics" }}
  </Button>
  <CollapsibleSection.Root v-model:open="open">
    <CollapsibleSection.Header>
      <CollapsibleSection.Trigger>Run diagnostics</CollapsibleSection.Trigger>
    </CollapsibleSection.Header>
    <CollapsibleSection.Content>
      Residual 8.4e-6 · Courant max 0.82
    </CollapsibleSection.Content>
  </CollapsibleSection.Root>
</template>

Disabled Trigger

Disable disclosure changes while keeping already-open content visible.

The section stays open while its disclosure trigger is disabled.

<CollapsibleSection.Root default-open disabled>
  <CollapsibleSection.Header>
    <CollapsibleSection.Trigger>Generated controls</CollapsibleSection.Trigger>
  </CollapsibleSection.Header>
  <CollapsibleSection.Content>
    The section stays open while its disclosure trigger is disabled.
  </CollapsibleSection.Content>
</CollapsibleSection.Root>

Accessibility

Trigger is a native button with managed aria-expanded and aria-controls.
Enter and Space toggle the focused trigger.
The indicator is decorative and follows inherited text direction.
Header actions stay separate in the keyboard order and do not toggle the section.
Expansion motion stops when the user requests reduced motion.

API Reference

CollapsibleSection.Root

Prop	Type	Default	Description
`open`	`boolean`	`-`	Controlled open state; supports v-model:open.
`size`	`"compact" \| "base"`	`"base"`	Controls header and content density.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled use.
`disabled`	`boolean`	`false`	Prevents the trigger from changing the open state.
`lazyMount`	`boolean`	`false`	Defers content mounting until it first opens.
`unmountOnExit`	`boolean`	`false`	Removes content after the close transition.
`id`	`string`	`generated`	Stable identifier for the disclosure state machine.
`ids`	`CollapsibleSectionRootProps['ids']`	`generated`	Overrides generated root, trigger, and content IDs.

Parts

Part	Element	Description
`CollapsibleSection.Header`	`div`	Groups the disclosure trigger and optional independent actions.
`CollapsibleSection.Trigger`	`button`	Toggles content and supplies the default leading indicator.
`CollapsibleSection.Indicator`	`div`	Shows open state with a replaceable decorative icon.
`CollapsibleSection.Actions`	`div`	Holds compact controls that do not toggle the section.
`CollapsibleSection.Content`	`div`	Animated content region with dense default padding.

Events

Event	Payload	Description
`update:open`	`boolean`	Emitted when the controlled open state changes.
`openChange`	`{ open: boolean }`	Emitted after an open-state change.
`exitComplete`	`void`	Emitted after the close transition completes.

Data Slots

Slot	Description
`collapsible-section`	Root disclosure element.
`collapsible-section-header`	Header row.
`collapsible-section-trigger`	Disclosure button.
`collapsible-section-label`	Clipped trigger label.
`collapsible-section-indicator`	Open-state marker.
`collapsible-section-actions`	Independent header actions.
`collapsible-section-content`	Animated content region.
`collapsible-section-content-body`	Default padded content body.

Exports

Export	Description
`CollapsibleSection`	Compound API exposing Root, Header, Trigger, Indicator, Actions, and Content.
`CollapsibleSectionRoot`	Unaugmented root component.
`CollapsibleSectionHeader`	Header layout component.
`CollapsibleSectionTrigger`	Accessible disclosure trigger.
`CollapsibleSectionIndicator`	Decorative open-state indicator.
`CollapsibleSectionActions`	Independent header action container.
`CollapsibleSectionContent`	Animated section content.
`CollapsibleSectionProps`	Public root prop contract.
`CollapsibleSectionEmits`	Public root event contract.