Note

This documentation describes the DynamicCheckbox Vue component for native UI views for Xml templates see checkbox.

DynamicCheckbox

Dynamically renders a Switch, Checkbox, or RadioGroup based on displayMode and required. Designed for binding boolean | null values.

Import

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

Props

Inherits all shared input props, plus:

Prop	Type	Default	Description
modelValue	boolean \| null	null	Bound value (v-model)
displayMode	'switch' \| 'checkbox' \| 'radio' \| 'vertical-radio'	'switch'	How the boolean input is rendered
trueLabel	string	'Yes'	Label for the true option (radio/checkbox)
falseLabel	string	'No'	Label for the false option (radio)
nullLabel	string	'Undefined'	Label for the null option (radio, only when not required)

Rendering Logic

required	displayMode	Rendered as
true	'switch'	Toggle switch (2 states)
true	'checkbox'	Checkbox
false	'switch' / 'checkbox'	RadioGroup (3 options: true/false/null)
any	'radio'	Horizontal RadioGroup
any	'vertical-radio'	Vertical RadioGroup

Emits

update:modelValue, aiApply, aiCancel, update:focused

Usage Examples

Toggle switch (required boolean)

<DynamicCheckbox v-model="isEnabled" label="Enabled" :required="true" />

Checkbox for required boolean

<DynamicCheckbox
  v-model="acceptTerms"
  label="Accept Terms"
  display-mode="checkbox"
  :required="true"
/>

Tri-state radio (nullable boolean)

<DynamicCheckbox
  v-model="approved"
  label="Approval Status"
  display-mode="radio"
  true-label="Approved"
  false-label="Rejected"
  null-label="Pending"
/>