Skip to main content

Multi Autocomplete

multiautocomplete renders a local multi-select autocomplete. Users select several options and each selection is displayed as a removable chip.

{
  name: 'roles',
  label: 'Workspace roles',
  type: 'multiautocomplete',
  options: [
    {label: 'Sales', value: 'sales'},
    {label: 'Finance', value: 'finance'},
  ],
}

Value and local options​

Its value is an array of string | number | boolean. DYONA Form preserves each option value type exactly and rejects values that do not exist in options.

multiautocomplete currently supports local options only. Remote mode with optionsSource is not supported yet.

{roles: ['sales', 'finance']}

Defaults and initial values​

Use defaultValue for a local option-value array. You can also provide the same array in initialValues; every value must exist in options.

{
  name: 'roles',
  label: 'Workspace roles',
  type: 'multiautocomplete',
  options: [
    {label: 'Sales', value: 'sales'},
    {label: 'Finance', value: 'finance'},
  ],
  defaultValue: ['sales'],
}
<DyonaForm
  schema={schema}
  initialValues={{roles: ['sales', 'finance']}}
/>

Visible chips​

maxVisibleChips?: number limits how many selected chips are shown before the summary. Its default is 4 and it must be an integer greater than 0. When more selections exist, the +N chip opens a dialog with all current selections. In the dialog, users can search the selected options and remove selections.

{
  name: 'roles',
  label: 'Workspace roles',
  type: 'multiautocomplete',
  maxVisibleChips: 4,
  options: [
    {label: 'Sales', value: 'sales'},
    {label: 'Finance', value: 'finance'},
  ],
}

Required, state, and help​

Use required: true to require at least one selected option. readOnly: true lets users open the selection dialog to review and search the current selections, but not remove them. disabled: true prevents interaction and does not open the dialog. Use helperText to describe the selection.

{
  name: 'approvedModules',
  label: 'Approved modules',
  type: 'multiautocomplete',
  readOnly: true,
  helperText: 'These permissions are approved centrally.',
  options: [
    {label: 'Analytics', value: 'analytics'},
    {label: 'Exports', value: 'exports'},
  ],
}

Conditions and grid​

Multi Autocomplete fields use the shared declarative conditions and responsive grid.

{
  name: 'advancedModules',
  label: 'Advanced modules',
  type: 'multiautocomplete',
  options: [{label: 'Audit log', value: 'audit-log'}],
  visibleWhen: {field: 'advancedAccess', operator: 'equals', value: true},
  grid: {xs: 12, md: 6},
}

See Fields for the shared field contract.

Try Multi Autocomplete in the Lab