SelectMultiple
Seleção múltipla com busca e autocomplete — escolher vários itens de uma lista, como tags.
Componente do EletroDS —
MeSelectMultiple, base no UInputMenu (Nuxt UI) com seleção múltipla. Não recrie um multi-select à mão.O SelectMultiple deixa o usuário escolher vários itens de uma lista, com busca e autocomplete; os selecionados viram tags no campo. Use quando a escolha é múltipla e a lista é média/grande (com filtragem por digitação).
Quando usar
- Vários valores de um conjunto — ex.: categorias de um fornecedor, responsáveis de uma cotação.
- Para uma escolha, use o Select. Para mover/ordenar itens entre duas listas (ex.: editar colunas), use o DualList. Para digitar valores livres como tags, o InputMultiple.
Configuração
| Prop | Papel |
|---|---|
v-model (modelValue) | Itens selecionados. |
items | Opções disponíveis (InputMenuItem[]). |
placeholder | Texto do campo vazio. |
disabled · loading · loading-icon | Desabilitado / carregando (com ícone opcional). |
color · variant · size | Aparência (variante padrão outline, tamanho md). |
highlight | Realça como foco (ex.: indicar erro/atenção). |
open-on-click · open-on-focus | Quando abrir o dropdown. |
counter | Mantém o campo em uma linha só: as tags que não cabem colapsam num badge de contagem clicável, que abre um popover listando as demais. (Sem counter, as tags quebram livremente em várias linhas.) |
tag-max-width-class | Largura máxima de cada tag (padrão max-w-[30%]) — passe uma classe max-w-*. |
Tags: cada tag trunca quando o rótulo passa da largura máxima e mostra o texto completo em tooltip no hover — mantém rótulos longos legíveis sem quebrar o layout.
Eventos: update:modelValue, change, focus, blur.
No código
MeSelectMultiple (componente EletroDS) — API e preview ao vivo em eletro.design/components/selectmultiple.
Acessibilidade
- O campo tem rótulo (FormField); a lista é navegável por teclado (setas, Enter, Esc).
- Cada item selecionado (tag) é removível por teclado e a contagem/seleção é anunciada.
loadinge estado vazio têm texto, não só ícone.