Basic Examples

Explore practical and interactive examples demonstrating the features of Vanilla Smart Select. All examples are fully functional and include complete source code.

💡 Tip: All examples below are working live. Interact with them! You can also find more examples by navigating the sidebar menu and complete standalone examples in the examples/ and examples-bootstrap/ folders of the repository. These files can be opened directly in the browser.

Single Select with Search

Basic example of single select with active search and full diacritics support.

View code

HTML

<select id="example1">
  <option value="">Select a fruit...</option>
  <option value="maca">Apple</option>
  <option value="banana">Banana</option>
  <option value="laranja">Orange</option>
  <!-- ... other options ... -->
</select>

JavaScript

const select = new VanillaSmartSelect('#example1', {
  placeholder: 'Select a fruit...',
  searchable: true,
  searchPlaceholder: 'Type to search...'
});
Features:
  • Search: Type to filter (supports accents - eg: "acai" finds "Çaí")
  • Keyboard: ↑↓ to navigate, Enter to select, ESC to close
  • Accessibility: Fully accessible with screen readers (full ARIA)

Multi-Select with Search

Multi-selection with integrated search and individual item removal.

View code

HTML

<select id="example2" multiple>
  <option value="js" selected>JavaScript</option>
  <option value="ts">TypeScript</option>
  <option value="py">Python</option>
  <!-- ... other options ... -->
</select>

JavaScript

const select = new VanillaSmartSelect('#example2', {
  placeholder: 'Select languages...',
  multiple: true,
  searchable: true,
  searchPlaceholder: 'Search languages...'
});
Features:
  • Multi-selection: Select multiple items
  • Remove: Click the × to remove a selected item
  • Search: Type to filter the list
  • Keyboard: Tab inside dropdown is blocked - use Enter or ESC

Select with Groups (Optgroups)

Options organized in logical groups with intelligent search.

View code

HTML

<select id="example3">
  <option value="">Select a country...</option>
  <optgroup label="South America">
    <option value="br">Brazil</option>
    <option value="ar">Argentina</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="pt">Portugal</option>
    <option value="es">Spain</option>
  </optgroup>
</select>

JavaScript

const select = new VanillaSmartSelect('#example3', {
  placeholder: 'Select a country...',
  searchable: true,
  searchPlaceholder: 'Search country...'
});
Features:
  • Groups: Options organized by category
  • Search in groups: Type to search - shows only groups with results
  • Navigation: Use Home/End to go to first/last item

Single Select with Clear Button

Button to clear current selection with dedicated event.

View code

HTML

<select id="example4">
  <option value="">Select a color...</option>
  <option value="vermelho">Red</option>
  <option value="azul">Blue</option>
  <!-- ... other options ... -->
</select>

JavaScript

const select4 = new VanillaSmartSelect('#example4', {
  placeholder: 'Select a color...',
  searchable: true,
  allowClear: true,
  searchPlaceholder: 'Search color...'
});

// Listener for clear event
document.querySelector('#example4').addEventListener('vs:clear', (e) => {
  console.log('Selection cleared!');
});
Features:
  • Clear Button: "×" button appears when there's a selection - click to clear
  • Programmatic API: Use select.clear() to clear via code
  • Event: Listen to vs:clear event when clearing

Automatic HTML5 Validation

Native browser validation works automatically, without additional JavaScript.

View code

HTML

<!-- Just use required attribute -->
<select id="example5a" required>
  <option value="">Select...</option>
  <option value="ti">IT</option>
  <option value="rh">HR</option>
</select>

JavaScript

// Validation works automatically!
new VanillaSmartSelect('#example5a', { searchable: true });
new VanillaSmartSelect('#example5b', { searchable: true });
new VanillaSmartSelect('#example5c', { searchable: true });
✓ 100% Automatic Validation - No additional JavaScript!
  • Automatic red border when required field is empty
  • Native browser message when trying to submit invalid form
  • Original select always synchronized - works with any validation library
  • Works with complex forms - scales to dozens of fields without extra code

Disabled Options

Demonstration of unavailable options using the disabled attribute.

View code

HTML

<select id="disabled-options">
  <option value="">Select...</option>
  <option value="opt1">Option 1</option>
  <option value="opt2" disabled>Option 2 (Unavailable)</option>
  <option value="opt3">Option 3</option>
  <option value="opt4" disabled>Option 4 (Unavailable)</option>
  <option value="opt5">Option 5</option>
</select>

JavaScript

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

Events

Example with listeners for the component's main events.

Event Log:
Events will appear here...
View code

HTML

<select id="events-demo">
  <option value="">Select...</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>

JavaScript

const vsEvents = new VanillaSmartSelect('#events-demo', {
  placeholder: 'Select...',
  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 initialized', '#6f42c1'));
eventsEl.addEventListener('vs:open', () => addLog('vs:open - Dropdown opened', '#17a2b8'));
eventsEl.addEventListener('vs:close', () => addLog('vs:close - Dropdown closed', '#6c757d'));
eventsEl.addEventListener('vs:select', (e) => addLog(`vs:select - Selected: ${e.detail.data?.text || e.detail.value}`, '#28a745'));
eventsEl.addEventListener('vs:change', (e) => addLog(`vs:change - Value: ${e.detail.value}`, '#007bff'));

Keyboard Shortcuts

All examples above support complete keyboard navigation.

Available shortcuts:
Key Action
Enter / Space Opens the dropdown (when closed)
↑ / ↓ Navigate between options
Home Go to first option
End Go to last option
Enter Select the highlighted option (when dropdown open)
ESC Close dropdown without selecting
Tab Dropdown closed: exit field | Dropdown open: blocked (use Enter/ESC)

More Examples

Explore more advanced and specific examples:

🎨 Custom Templates

Create rich results with avatars, icons, badges and images.

View examples →

🌐 AJAX & Remote Data

Load options from external APIs with pagination and cache.

View examples →

🏷️ Dynamic Tags

Allow users to create new options while typing.

View example →

🌍 Internationalization

Support for multiple languages and custom messages.

View examples →

✓ HTML5 Validation

Integration with native form validation.

View example →

🎭 Bootstrap 5

Perfect integration with Bootstrap components.

View examples →