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 { value: T, label: string } objects (at field level, not in props)

Core Props:

placeholder: Placeholder text when no value selected

Adapter Props

Prop	Type	Description
`appearance`	`'fill' \| 'outline'`	Material form field appearance variant
`multiple`	`boolean`	Allow multiple selections
`hint`	`string`	Helper text below the field
`panelMaxHeight`	`number`	Max height of dropdown panel in pixels
`floatLabel`	`'auto' \| 'always' \| 'never'`	Label float behavior
`hideRequiredMarker`	`boolean`	Hide the required asterisk

Example

Material

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 { value: string, label: string } objects (at field level, not in props)

Adapter Props

Prop	Type	Description
`color`	`ThemePalette`	Material theme color
`labelPosition`	`'before' \| 'after'`	Position of label relative to radio button
`disableRipple`	`boolean`	Disable Material ripple effect
`hint`	`string`	Helper text below the field

Example

Material

checkbox

Boolean toggle control.

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

Adapter Props

Prop	Type	Description
`color`	`ThemePalette`	Material theme color
`labelPosition`	`'before' \| 'after'`	Position of label
`disableRipple`	`boolean`	Disable Material ripple effect
`indeterminate`	`boolean`	Show indeterminate state
`hint`	`string`	Helper text below the field

Example

Material

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
`color`	`ThemePalette`	Material theme color
`labelPosition`	`'before' \| 'after'`	Position of label
`disableRipple`	`boolean`	Disable Material ripple effect
`hideIcon`	`boolean`	Hide the icon on the thumb
`hint`	`string`	Helper text below the field

Example

Material

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 { value: T, label: string } objects (at field level, not in props)

Adapter Props

Prop	Type	Description
`color`	`ThemePalette`	Material theme color for all checkboxes
`labelPosition`	`'before' \| 'after'`	Position of labels
`disableRipple`	`boolean`	Disable Material ripple effect
`hint`	`string`	Helper text below the field

Example

Material