1. Básico

Envolva o <select> nativo com um div sw-select. O JS oculta o nativo, injeta a UI e mantém os dois sincronizados. Com busca ativada (padrão em seleção única) o próprio campo visível já é o input de busca — clique e comece a digitar direto, sem passo extra. Use sw-select-search="false" para remover a busca.

2. Multi-Select com Tags

Adicione multiple no <select>. Cada item selecionado vira uma tag com botão de remoção - clique no ?- para remover ou selecione o item novamente para desmarcar.

3. Estados de Validação

Adicione .is-err ou .is-ok no wrapper para indicar o estado do campo. Normalmente aplicados via JS após validação.

// Aplicar estado via JS
const wrap = document.querySelector('[sw-select]');
wrap.classList.add('is-err');  // ou is-ok
wrap.classList.remove('is-err', 'is-ok');

4. Evento em Tempo Real

sw:select:change é disparado no wrapper a cada seleção. O select nativo também recebe um change padrão - formulários funcionam normalmente.

document.querySelector('[sw-select]')
  .addEventListener('sw:select:change', e => {
    console.log(e.detail.value);  // array com os valores selecionados
    console.log(e.detail.label);  // label do primeiro selecionado
  });

// Select nativo também dispara 'change' normalmente
document.querySelector('[name="plano"]')
  .addEventListener('change', function () {
    console.log(this.value);
  });