Fields for selecting one or multiple values from a set of options.

select

Single or multi-select dropdown.

{
  key: 'country',
  type: 'select',
  value: '',
  label: 'Country',
  required: true,
  options: [
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
  ],
  placeholder: 'Select country',
}

Core Properties:

  • options: Array of { label: DynamicText, value: T, disabled?: boolean } objects (at field level, not in props). label accepts static strings, signals, or observables; disabled makes the option non-selectable
  • placeholder: Placeholder text when no value selected (at field level, not in props)

Adapter Props

PropTypeDescription
multiplebooleanAllow multiple selections
filterbooleanShow search filter in dropdown
showClearbooleanShow clear button
hintstringHelper text below the field

PrimeNG PrimeNG
Loading live example

radio

Single selection from multiple options.

{
  key: 'plan',
  type: 'radio',
  value: '',
  label: 'Subscription Plan',
  required: true,
  options: [
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro - $10/month' },
    { value: 'enterprise', label: 'Enterprise - $50/month' },
  ],
}

Core Properties:

  • options: Array of { label: DynamicText, value: string, disabled?: boolean } objects (at field level, not in props). label accepts static strings, signals, or observables; disabled makes the option non-selectable

Adapter Props

PropTypeDescription
hintstringHelper text below the field

PrimeNG PrimeNG
Loading live example

checkbox

Boolean toggle control.

{
  key: 'newsletter',
  type: 'checkbox',
  value: false,
  label: 'Subscribe to newsletter',
}

Adapter Props

PropTypeDescription
binarybooleanUse binary true/false value mode
trueValueunknownValue when checked
falseValueunknownValue when unchecked
hintstringHelper text below the field

PrimeNG PrimeNG
Loading live example

toggle

Boolean switch control. Similar to checkbox but with a switch UI.

{
  key: 'darkMode',
  type: 'toggle',
  label: 'Enable Dark Mode',
  value: false,
}

Adapter Props

PropTypeDescription
styleClassstringAdditional CSS class for the toggle
hintstringHelper text below the field

PrimeNG PrimeNG
Loading live example

multi-checkbox

Multiple selection from a list of checkboxes. Value is an array of selected values.

{
  key: 'interests',
  type: 'multi-checkbox',
  label: 'Interests',
  value: [],
  options: [
    { value: 'tech', label: 'Technology' },
    { value: 'sports', label: 'Sports' },
    { value: 'music', label: 'Music' },
  ],
}

Core Properties:

  • options: Array of { label: DynamicText, value: T, disabled?: boolean } objects (at field level, not in props). label accepts static strings, signals, or observables; disabled makes the option non-selectable

Adapter Props

PropTypeDescription
styleClassstringAdditional CSS class
hintstringHelper text below the field

PrimeNG PrimeNG
Loading live example