DualList
O transfer-list do ME (inativas ↔ ativas) — peça por trás do "Editar colunas" da index e de escolher itens entre duas listas.
DualList, usado no código como <MeDualList>. No Figma, use o componente da Library; nunca recrie um seletor de duas listas à mão.O DualList move itens entre duas colunas — disponíveis (esquerda) e selecionados (direita). É a peça por trás do Editar colunas da index (colunas inativas ↔ ativas) e de qualquer cenário "escolher alguns itens de um catálogo". O comportamento de configurar colunas vive em Estrutura de Index; aqui está a ficha do componente.
Uso em tela
Aparece dentro de um modal (ex.: "Editar colunas") ou embutido num formulário. Lê-se da esquerda pra direita: à esquerda o que está fora, à direita o que está ativo, com setas no meio reforçando a transferência. Cada lado tem busca própria; move-se item a item (ícone + / ×) ou em massa (Selecionar todas / Remover todas).
Para poucas opções (2–3, binárias), um grupo de checkboxes resolve melhor. O DualList ganha quando a lista é grande, a busca ajuda a achar, e o usuário precisa revisar de relance o que ficou ativo — nunca empilhe checkboxes soltos para isso.
Aplicação
O mesmo componente reaparece sempre que se monta um subconjunto a partir de um catálogo — reconhecê-lo evita reinventar a interação:
| Onde | O que se move |
|---|---|
| Editar colunas da index | colunas disponíveis → exibidas (e a ordem das exibidas, arrastando) |
| Convidar / enviar follow-up | contatos disponíveis → destinatários |
| Permissões de um perfil | permissões disponíveis → atribuídas |
| Cotação / catálogo | fornecedores ou categorias → selecionados |
A mecânica é idêntica nos quatro; muda só o rótulo dos lados (left-box-label / right-box-label) e o catálogo de itens.
Variantes
Escolha pelo cenário:
| Quero… | Use |
|---|---|
| Reordenar os selecionados arrastando | draggable (handle nos dois lados; a reordenação pausa enquanto há busca ativa) |
| Rotular cada lado | left-box-label / right-box-label |
| Descrição ou ajuda por lado | left-box-description · right-box-help (e os pares à direita) |
| Mensagem de lista vazia | left-box-empty-text / right-box-empty-text |
| Itens que são objetos (não texto) | value-key (id estável) + value-label (texto exibido) |
| Conteúdo extra por item selecionado | slots input, icons-left, icons-right |
Estados
| Estado | Comportamento |
|---|---|
| Default | Move item a item (+ / ×) ou em massa (Selecionar/Remover todas). |
required | Marca os dois lados como obrigatórios no formulário. |
disabled | Desativa as duas colunas e as ações em massa; as ações por item também ficam inertes. |
| Vazio | Mostra o texto de vazio do lado (ex.: "Não encontramos nada aqui"). |
| Erro por lado | left-error / right-error exibem a mensagem (ex.: "selecione ao menos uma coluna"). |
| Busca ativa | Filtra aquele lado; mover entre listas continua, mas reordenar (draggable) pausa. |
No código
<MeDualList> é um componente EletroDS. Props, eventos e tipos completos — para quem for implementar — ficam no doc técnico: eletro.design/components/duallist. Aqui o foco é o uso em Design.
Acessibilidade
Cada lista é uma região de formulário: rotule os dois lados (left-box-label / right-box-label). As ações por item (+ / ×) e as de massa precisam de rótulo acessível, não só ícone. O estado disabled deve ser percebido além da cor (opacidade + aria-disabled). Garanta mover por teclado, não só arrastando — draggable é um reforço, não o único caminho.