- Plugins
- Advanced Select
Plugins
Tailwind CSS Advanced Select
Advanced select solutions for massive datasets.
Installation
To get started, install Advanced Select plugin via npm, else you can skip this step if you are already using Preline UI as a package.
npm i @preline/select
Example
Here is a basic example of a select with advanced features.
<div class="relative">
<select data-hs-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\"></button>",
"toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 px-4 pe-9 flex text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-[1] dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600",
"dropdownClasses": "mt-2 z-50 w-full max-h-[300px] p-1 space-y-0.5 bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto dark:bg-slate-900 dark:border-gray-700",
"optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100 dark:bg-slate-900 dark:hover:bg-slate-800 dark:text-gray-200 dark:focus:bg-slate-800",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"flex-shrink-0 w-3.5 h-3.5 text-blue-600 dark:text-blue-500\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
}'>
<option value="">Choose</option>
<option>Name</option>
<option>Email address</option>
<option>Description</option>
<option>User ID</option>
</select>
<div class="absolute top-1/2 end-2.5 -translate-y-1/2">
<svg class="flex-shrink-0 w-4 h-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
</div>
</div>
Basic usage
Prefer to create your own style? Here is a completely unstylized example.
<select data-hs-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\"></button>",
"toggleClasses": "",
"dropdownClasses": "",
"optionClasses": "hs-selected:"
}'>
<option>Select option</option>
<option>Name</option>
<option>Email address</option>
<option>Description</option>
<option>User ID</option>
</select>
Methods
The HSSelect
object is contained within the global window
object
Open item (public method).
const select = new HSSelect(document.querySelector('#select'));
const openBtn = document.querySelector('#open-btn');
openBtn.addEventListener('click', () => {
select.open();
});
Open item (static method).
const openBtn = document.querySelector('#open-btn');
openBtn.addEventListener('click', () => {
HSSelect.open('#select');
});
Open item (mixed).
const { element } = HSSelect.getInstance('#select', true);
const openBtn = document.querySelector('#open-btn');
openBtn.addEventListener('click', () => {
element.open();
});
Events
When select changes event example.
const el = HSSelect.getInstance('#select');
el.on('change', (val) => {...});
Demo examples
Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.
Check out Preline UI Advanced Select