Basic Examples
Explore practical and interactive examples demonstrating the features of Vanilla Smart Select. All examples are fully functional and include complete source code.
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...'
});
- 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...'
});
- 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...'
});
- 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!');
});
- 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:clearevent when clearing
Automatic HTML5 Validation
Native browser validation works automatically, without additional JavaScript.
- Automatic red border when
requiredfield 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.
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.
| 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: