Pular para o conteúdo principal

Multi Autocomplete

multiautocomplete renderiza um autocomplete local de seleção múltipla. A pessoa pode escolher várias opções e cada seleção aparece como um chip removível.

{
  name: 'roles',
  label: 'Funções do espaço de trabalho',
  type: 'multiautocomplete',
  options: [
    {label: 'Vendas', value: 'sales'},
    {label: 'Finanças', value: 'finance'},
  ],
}

Valor e opções locais​

Seu valor é um array de string | number | boolean. O DYONA Form preserva estritamente o tipo de cada valor de opção e rejeita valores que não existam em options.

No momento, multiautocomplete suporta apenas options locais. O modo remoto com optionsSource ainda não é suportado.

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

Defaults e initial values​

Use defaultValue para um array de valores de opções locais. Você também pode fornecer o mesmo array em initialValues; cada valor deve existir em options.

{
  name: 'roles',
  label: 'Funções do espaço de trabalho',
  type: 'multiautocomplete',
  options: [
    {label: 'Vendas', value: 'sales'},
    {label: 'Finanças', value: 'finance'},
  ],
  defaultValue: ['sales'],
}
<DyonaForm
  schema={schema}
  initialValues={{roles: ['sales', 'finance']}}
/>

Chips visíveis​

maxVisibleChips?: number limita quantos chips selecionados são mostrados antes do resumo. Seu padrão é 4 e ele deve ser um inteiro maior que 0. Quando há mais seleções, o chip +N abre um diálogo com todas as seleções atuais. No diálogo, é possível buscar as opções selecionadas e remover seleções.

{
  name: 'roles',
  label: 'Funções do espaço de trabalho',
  type: 'multiautocomplete',
  maxVisibleChips: 4,
  options: [
    {label: 'Vendas', value: 'sales'},
    {label: 'Finanças', value: 'finance'},
  ],
}

Required, estado e ajuda​

Use required: true para exigir pelo menos uma opção. readOnly: true permite abrir o diálogo de seleção para consultar e buscar as seleções atuais, mas não removê-las. disabled: true impede a interação e não abre o diálogo. Use helperText para descrever a seleção.

{
  name: 'approvedModules',
  label: 'Módulos aprovados',
  type: 'multiautocomplete',
  readOnly: true,
  helperText: 'Estas permissões são aprovadas centralmente.',
  options: [
    {label: 'Análises', value: 'analytics'},
    {label: 'Exportações', value: 'exports'},
  ],
}

Condições e grid​

Fields Multi Autocomplete usam as condições declarativas e o grid responsivo compartilhados.

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

Consulte Fields para o contrato compartilhado de fields.

Testar Multi Autocomplete no Lab