Saltar al contenido principal

Multi Autocomplete

multiautocomplete renderiza un autocomplete local de selección múltiple. La persona puede elegir varias opciones y cada selección se muestra como un chip removible.

{
  name: 'roles',
  label: 'Roles del espacio de trabajo',
  type: 'multiautocomplete',
  options: [
    {label: 'Ventas', value: 'sales'},
    {label: 'Finanzas', value: 'finance'},
  ],
}

Valor y opciones locales​

Su valor es un array de string | number | boolean. DYONA Form preserva estrictamente el tipo de cada valor de opción y rechaza valores que no existan en options.

Por ahora, multiautocomplete solo soporta options locales. El modo remoto con optionsSource todavía no está soportado.

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

Defaults e initial values​

Usá defaultValue para un array de valores de opciones locales. También podés proporcionar el mismo array en initialValues; cada valor debe existir en options.

{
  name: 'roles',
  label: 'Roles del espacio de trabajo',
  type: 'multiautocomplete',
  options: [
    {label: 'Ventas', value: 'sales'},
    {label: 'Finanzas', value: 'finance'},
  ],
  defaultValue: ['sales'],
}
<DyonaForm
  schema={schema}
  initialValues={{roles: ['sales', 'finance']}}
/>

Chips visibles​

maxVisibleChips?: number limita cuántos chips seleccionados se muestran antes del resumen. Su default es 4 y debe ser un entero mayor a 0. Cuando existen más selecciones, el chip +N abre un diálogo con todas las selecciones actuales. Dentro del diálogo, se pueden buscar las opciones seleccionadas y quitar selecciones.

{
  name: 'roles',
  label: 'Roles del espacio de trabajo',
  type: 'multiautocomplete',
  maxVisibleChips: 4,
  options: [
    {label: 'Ventas', value: 'sales'},
    {label: 'Finanzas', value: 'finance'},
  ],
}

Required, estado y ayuda​

Usá required: true para requerir al menos una opción. readOnly: true permite abrir el diálogo de selección para consultar y buscar las selecciones actuales, pero no quitarlas. disabled: true impide la interacción y no abre el diálogo. Usá helperText para describir la selección.

{
  name: 'approvedModules',
  label: 'Módulos aprobados',
  type: 'multiautocomplete',
  readOnly: true,
  helperText: 'Estos permisos se aprueban centralmente.',
  options: [
    {label: 'Analítica', value: 'analytics'},
    {label: 'Exportaciones', value: 'exports'},
  ],
}

Condiciones y grid​

Los fields Multi Autocomplete usan las condiciones declarativas y el grid responsive compartidos.

{
  name: 'advancedModules',
  label: 'Módulos avanzados',
  type: 'multiautocomplete',
  options: [{label: 'Registro de auditoría', value: 'audit-log'}],
  visibleWhen: {field: 'advancedAccess', operator: 'equals', value: true},
  grid: {xs: 12, md: 6},
}

Consultá Fields para el contrato compartido de fields.

Probar Multi Autocomplete en el Lab