Básico

Explore exemplos práticos e interativos demonstrando os recursos do Vanilla Smart Select. Todos os exemplos são totalmente funcionais e incluem o código fonte completo.

Single Select com Busca

Exemplo básico de single select com busca ativa e suporte completo a diacríticos.

<select id="example1">
  <option value="">Selecione uma fruta...</option>
  <option value="maca">Maçã</option>
  <option value="banana">Banana</option>
  <option value="laranja">Laranja</option>
  <!-- ... outras opções ... -->
</select>

const select = new VanillaSmartSelect('#example1', {
  placeholder: 'Selecione uma fruta...',
  searchable: true,
  searchPlaceholder: 'Digite para buscar...'
});

Multi-Select com Busca

Multi-seleção com busca integrada e remoção individual de itens.

<select id="example2" multiple>
  <option value="js" selected>JavaScript</option>
  <option value="ts">TypeScript</option>
  <option value="py">Python</option>
  <!-- ... outras opções ... -->
</select>

const select = new VanillaSmartSelect('#example2', {
  placeholder: 'Selecione linguagens...',
  multiple: true,
  searchable: true,
  searchPlaceholder: 'Buscar linguagens...'
});

Select com Grupos (Optgroups)

Opções organizadas em grupos lógicos com busca inteligente.

<select id="example3">
  <option value="">Selecione um país...</option>
  <optgroup label="América do Sul">
    <option value="br">Brasil</option>
    <option value="ar">Argentina</option>
  </optgroup>
  <optgroup label="Europa">
    <option value="pt">Portugal</option>
    <option value="es">Espanha</option>
  </optgroup>
</select>

const select = new VanillaSmartSelect('#example3', {
  placeholder: 'Selecione um país...',
  searchable: true,
  searchPlaceholder: 'Buscar país...'
});

Single Select com Clear Button

Botão para limpar a seleção atual com evento dedicado.

<select id="example4">
  <option value="">Selecione uma cor...</option>
  <option value="vermelho">Vermelho</option>
  <option value="azul">Azul</option>
  <!-- ... outras opções ... -->
</select>

const select4 = new VanillaSmartSelect('#example4', {
  placeholder: 'Selecione uma cor...',
  searchable: true,
  allowClear: true,
  searchPlaceholder: 'Buscar cor...'
});

// Listener para evento de clear
document.querySelector('#example4').addEventListener('vs:clear', (e) => {
  console.log('Seleção limpa!');
});

Validação HTML5 Automática

Validação nativa do navegador funciona automaticamente, sem JavaScript adicional.

<!-- Basta usar atributo required -->
<select id="example5a" required>
  <option value="">Selecione...</option>
  <option value="ti">TI</option>
  <option value="rh">RH</option>
</select>

// Validação funciona automaticamente!
new VanillaSmartSelect('#example5a', { searchable: true });
new VanillaSmartSelect('#example5b', { searchable: true });
new VanillaSmartSelect('#example5c', { searchable: true });

Opções Desabilitadas

Demonstração de opções indisponíveis usando o atributo disabled.

<select id="disabled-options">
  <option value="">Selecione...</option>
  <option value="opt1">Opção 1</option>
  <option value="opt2" disabled>Opção 2 (Indisponível)</option>
  <option value="opt3">Opção 3</option>
  <option value="opt4" disabled>Opção 4 (Indisponível)</option>
  <option value="opt5">Opção 5</option>
</select>

new VanillaSmartSelect('#disabled-options', {
  placeholder: 'Selecione...',
  searchable: true
});

Eventos

Exemplo com listeners para eventos principais do componente.

<select id="events-demo">
  <option value="">Selecione...</option>
  <option value="a">Item A</option>
  <option value="b">Item B</option>
  <option value="c">Item C</option>
</select>

<div id="events-log">
  <div id="events-log-items"></div>
</div>

const vsEvents = new VanillaSmartSelect('#events-demo', {
  placeholder: 'Selecione...',
  searchable: true
});

const logBox = document.getElementById('events-log-items');
function addLog(message, color = '#333') {
  const ts = new Date().toLocaleTimeString();
  const div = document.createElement('div');
  div.style.marginBottom = '6px';
  div.innerHTML = `<strong style="color: ${color};">[${ts}]</strong> ${message}`;
  logBox.insertBefore(div, logBox.firstChild);
}

const eventsEl = document.getElementById('events-demo');
eventsEl.addEventListener('vs:init', () => addLog('vs:init - Select inicializado', '#6f42c1'));
eventsEl.addEventListener('vs:open', () => addLog('vs:open - Dropdown aberto', '#17a2b8'));
eventsEl.addEventListener('vs:close', () => addLog('vs:close - Dropdown fechado', '#6c757d'));
eventsEl.addEventListener('vs:select', (e) => addLog(`vs:select - Selecionado: ${e.detail.data?.text || e.detail.value}`, '#28a745'));
eventsEl.addEventListener('vs:change', (e) => addLog(`vs:change - Valor: ${e.detail.value}`, '#007bff'));

Atalhos de Teclado

Todos os exemplos acima suportam navegação completa por teclado.