Note

This documentation describes the DynamicCombobox Vue component for native UI views for Xml templates see combobox.

DynamicCombobox

Dynamically renders a Combobox, SelectButton, or RadioGroup based on displayMode. Supports any value type with optional custom display properties.

Import

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

Props

Inherits all shared input props, plus:

Prop	Type	Default	Description
modelValue	string \| boolean \| number \| Date \| object \| null	null	Bound value (v-model)
invalidValue	string \| null \| undefined	undefined	Raw typed string when no option matches (v-model:invalidValue)
values	unknown[]	undefined	Array of options to display
valueProperty	string	undefined	Property of each option to use as the bound value
displayProperty	string	undefined	Property of each option to display as the label
displayMode	'list' \| 'select-button' \| 'radio' \| 'vertical-radio'	'list'	How options are rendered

Emits

update:modelValue, update:invalidValue, aiApply, aiCancel, update:focused

Slots

Slot	Scope	Description
value	{ option }	Custom rendering for the selected value in Combobox mode
option	{ option }	Custom rendering for each dropdown option in Combobox mode
default	—	Passed to RadioGroup in radio modes

Usage Examples

Dropdown list from array

<DynamicCombobox v-model="status" label="Status" :values="['Active', 'Inactive', 'Pending']" />

Objects with value/display properties

<DynamicCombobox
  v-model="selectedCountry"
  label="Country"
  :values="countries"
  value-property="code"
  display-property="name"
/>

Toggle buttons

<DynamicCombobox
  v-model="priority"
  label="Priority"
  :values="['Low', 'Medium', 'High']"
  display-mode="select-button"
/>

Radio group

<DynamicCombobox
  v-model="gender"
  label="Gender"
  :values="genderOptions"
  value-property="value"
  display-property="label"
  display-mode="radio"
/>

Custom option rendering

<DynamicCombobox
  v-model="color"
  label="Color"
  :values="colorOptions"
  value-property="hex"
  display-property="name"
>
  <template #option="{ option }">
    <HorizontalLayout space="small" vertical-align="center">
      <div
        :style="{ background: option.hex, width: '16px', height: '16px', borderRadius: '50%' }"
      />
      <Text>{{ option.name }}</Text>
    </HorizontalLayout>
  </template>
</DynamicCombobox>