Select Componentes

Select customizado com busca e seleção múltipla com tags removíveis.

O que é

Substitui o <select> nativo (visual limitado, sem busca) por um dropdown estilizado, mantendo o <select> original escondido pra funcionar normalmente em formulários.

Como funciona

Na seleção única com busca, o próprio campo visível já é o input de busca (sem precisar abrir antes de digitar). Na múltipla, cada seleção vira uma tag removível. O <select> original recebe change sintético, então segue funcionando com qualquer código que já escute esse evento.

Exemplos

Única, com busca Ao vivo

<div sw-select>
  <select sw-select-ph="Escolha um país...">
    <option value="br">Brasil</option>
    <option value="pt">Portugal</option>
    <option value="us">Estados Unidos</option>
    <option value="ar">Argentina</option>
  </select>
</div>

Múltipla, com tags removíveis Ao vivo

<div sw-select>
  <select multiple>
    <option value="js" selected>JavaScript</option>
    <option value="ts">TypeScript</option>
    <option value="py">Python</option>
    <option value="go">Go</option>
  </select>
</div>

Sem busca (sw-select-search="false") Ao vivo

<div sw-select>
  <select sw-select-search="false" sw-select-ph="Escolha...">
    <option value="a">Opção A</option>
    <option value="b">Opção B</option>
  </select>
</div>

is-err / is-ok — estado de validação Ao vivo

<div class="demo-row">
  <div sw-select class="is-err"><select sw-select-ph="Campo com erro..."><option value="a">A</option></select></div>
  <div sw-select class="is-ok"><select sw-select-ph="Campo válido..."><option value="a">A</option></select></div>
</div>

Atributos

sw-select-ph

no <select> — texto de placeholder

sw-select-search="false"

desativa a busca

multiple

atributo nativo do select — ativa o modo múltiplo com tags

Variantes

is-err / is-ok

estado de validação

Eventos

sw:select:change

{ value, label }

change (no select nativo)

disparado sinteticamente, compatível com qualquer listener já existente

API (JavaScript)

SW.Select.set(target, valor)

define o valor por código

Requisitos

Precisa de um <select> real dentro do [sw-select] — não cria as opções do zero.

Limitações — o que ele não faz

Nenhuma.

← AnteriorMaterial Input Próximo →Upload