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
size'sm' | 'lg'Select size variant
floatingLabelbooleanUse Bootstrap floating label
multiplebooleanAllow multiple selections
hintstringHelper text below the field

Bootstrap Bootstrap
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
inlinebooleanDisplay options in a row
reversebooleanReverse label and control order
buttonGroupbooleanRender as Bootstrap button group
hintstringHelper text below the field

Bootstrap Bootstrap
Loading live example

checkbox

Boolean toggle control.

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

Adapter Props

PropTypeDescription
switchbooleanRender as Bootstrap switch style
inlinebooleanInline display
reversebooleanReverse label and control order
hintstringHelper text below the field

Bootstrap Bootstrap
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
reversebooleanReverse label and control order
inlinebooleanInline display
hintstringHelper text below the field

Bootstrap Bootstrap
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
switchbooleanRender checkboxes as Bootstrap switches
inlinebooleanDisplay options in a row
reversebooleanReverse label and control order
hintstringHelper text below the field

Bootstrap Bootstrap
Loading live example