Vanilla Smart Select
Transform <select> elements into powerful dropdowns with real-time search, AJAX, custom templates and full accessibility. All in pure JavaScript, no dependencies.
Quick Start
Transform a common select element into a powerful dropdown with just 3 lines of code:
<!-- 1. Include CSS and JS files -->
<link rel="stylesheet" href="vanilla-smart-select.min.css">
<script src="vanilla-smart-select.min.js"></script>
<!-- 2. Create a select element -->
<select id="my-select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>// 3. Initialize the plugin
const select = new VanillaSmartSelect('#my-select', {
placeholder: 'Select an option...',
searchable: true
});Key Features
Real-time Search
Instant filtering with diacritics support. Find "Açaí" by searching "acai".
Custom Templates
Create rich results with HTML: avatars, icons, badges, images and much more.
AJAX & Remote Data
Load options from external APIs with debouncing, cache and infinite pagination.
Fully Accessible
WCAG 2.1 Level AA with complete ARIA support and keyboard navigation.
Dynamic Tags
Allow users to create new options dynamically while typing.
Multi-Selection
Multiple selection with maximum limit and chips/tags visualization.
Internationalization
Native support for multiple languages: EN, PT-BR, ES and customizable.
High Performance
Optimized for large lists with virtual scrolling and efficient rendering.
Zero Dependencies
Modern pure JavaScript. No jQuery, no frameworks. Only ~15KB gzipped.
Mobile First
Responsive design optimized for touch with support for all devices.
Complete API
Full programmatic control: get/set values, add/remove options and more.
Bootstrap 5 Ready
Perfect integration with Bootstrap 5 without CSS conflicts.
Installation
NPM
npm install vanilla-smart-selectCDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-smart-select@1.0.1/dist/vanilla-smart-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/vanilla-smart-select@1.0.1/dist/vanilla-smart-select.min.js"></script>ES Modules
import VanillaSmartSelect from 'vanilla-smart-select';
import 'vanilla-smart-select/dist/vanilla-smart-select.min.css';Browser Compatibility
| Browser | Version | Status |
|---|---|---|
| Chrome / Edge | Latest 2 versions | ✓ Supported |
| Firefox | Latest 2 versions | ✓ Supported |
| Safari | Latest 2 versions | ✓ Supported |
| Opera | Latest 2 versions | ✓ Supported |
| Internet Explorer | All | ✗ Not supported |