Note

This documentation describes the GroupBox Vue component for native UI views, for Xml templates see group-box.

GroupBox

A collapsible panel container wrapping PrimeVue Panel. Supports a custom header slot, configurable padding, and two-way expanded state.

Import

import { GroupBox } from '@neos/design-system'

Props

Prop	Type	Default	Description
expandable	boolean	undefined	Show collapse/expand toggle button
headerPadding	Space	undefined	Override header padding with a design-token space value
contentPadding	Space	undefined	Override content area padding

v-model

Name	Type	Default	Description
expanded	boolean	true	Whether the panel is expanded

Slots

Slot	Description
header	Content placed in the panel header (replaces the default title)
content	Main body content of the panel

Emits

Event	Payload	Description
update:expanded	boolean	Emitted when expand/collapse state changes

Usage Examples

Simple static group box

<GroupBox>
  <template #header>
    <Text weight="strong">Personal Information</Text>
  </template>
  <template #content>
    <GridLayout columns="* *" gap="medium">
      <StringFormField property-name="firstName" />
      <StringFormField property-name="lastName" />
    </GridLayout>
  </template>
</GroupBox>

Collapsible section (controlled)

<GroupBox :expandable="true" v-model:expanded="sectionOpen">
  <template #header>
    <Text>Advanced Settings</Text>
  </template>
  <template #content>
    <BooleanFormField property-name="debugMode" />
    <NumberFormField property-name="timeout" />
  </template>
</GroupBox>

Custom padding

<GroupBox header-padding="small" content-padding="medium">
  <template #content>
    <Text>Content with custom padding</Text>
  </template>
</GroupBox>