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

Prop	Type	Description
`fill`	`'solid' \| 'outline'`	Ionic select fill style
`labelPlacement`	`'start' \| 'end' \| 'fixed' \| 'stacked' \| 'floating'`	Label position
`interface`	`'action-sheet' \| 'popover' \| 'alert'`	Presentation style of the picker
`multiple`	`boolean`	Allow multiple selections
`hint`	`string`	Helper text below the field

Ionic

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

Prop	Type	Description
`labelPlacement`	`'start' \| 'end' \| 'fixed' \| 'stacked'`	Label position
`justify`	`'start' \| 'end' \| 'space-between'`	Alignment of label and radio
`color`	`string`	Ionic color palette name
`hint`	`string`	Helper text below the field

Ionic

checkbox

Boolean toggle control.

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

Adapter Props

Prop	Type	Description
`labelPlacement`	`'start' \| 'end' \| 'fixed' \| 'stacked'`	Label position
`justify`	`'start' \| 'end' \| 'space-between'`	Alignment of label and checkbox
`color`	`string`	Ionic color palette name
`indeterminate`	`boolean`	Show indeterminate state
`hint`	`string`	Helper text below the field

Ionic

toggle

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

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

Adapter Props

Prop	Type	Description
`labelPlacement`	`'start' \| 'end' \| 'fixed' \| 'stacked'`	Label position
`justify`	`'start' \| 'end' \| 'space-between'`	Alignment of label and toggle
`color`	`string`	Ionic color palette name
`enableOnOffLabels`	`boolean`	Show ON/OFF text labels on toggle
`hint`	`string`	Helper text below the field

Ionic

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

Prop	Type	Description
`labelPlacement`	`'start' \| 'end' \| 'fixed' \| 'stacked'`	Label position for all checkboxes
`justify`	`'start' \| 'end' \| 'space-between'`	Alignment of labels and checkboxes
`color`	`string`	Ionic color palette name
`hint`	`string`	Helper text below the field

Ionic