1. Básico

Envolva o <select> nativo com um div y2select. O JS oculta o nativo, injeta a UI e mantém os dois sincronizados. A busca vem ativada por padrão - use y2select-search="false" para remover.

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('[y2select]');
wrap.classList.add('is-err');  // ou is-ok
wrap.classList.remove('is-err', 'is-ok');

4. Evento em Tempo Real

yd: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('[y2select]')
  .addEventListener('yd: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);
  });