Multi-select de tags com pesquisa (Popover + Command + ScrollArea).

Em @zexon/ui/components/tag-input. O valor é um array de strings (value / onValueChange). A lista e o filtro vêm do exterior: passa search e onSearchChange (debounce ou pedido na API no componente pai) e items já coerentes com a pesquisa. O Command interno usa shouldFilter={false}.

Use triggerVariant="hud" para o gatilho com o mesmo estilo Button variant="hud" (colchetes).

Uso

O exemplo abaixo está em components/docs/demos/tag-input-doc-demo.tsx (cliente): estado local, filtro no pai, onSelect para feedback e opção de simular carregamento ao abrir.

Seleção com pesquisa e criar

Altere as tags para ver o callback onSelect.

Com dados remotos, combina onOpenChange com enabled na query e debounce em onSearchChange.

Acessibilidade

O gatilho expõe aria-invalid quando há error e associa a mensagem com aria-describedby. Mantém o teclado e a lista dentro do padrão do cmdk.

Anterior:

Próximo: