advanced forms
Tailwind CSS Advanced select
The Advanced Select Component enhances traditional select boxes with features like search and tagging, offering versatility for complex selection needs.
Class Name | Type | Description |
---|---|---|
advance-select-toggle | Component | The advance-select-toggle component class is used for :toggleClasses , providing base styles to select toggle. |
advance-select-menu | Component | The advance-select-menu component class is used for :dropdownClasses , providing base styles to select dropdown menu. |
advance-select-option | Component | The advance-select-option component class is used for :optionClasses , providing base styles for individual select dropdown options. |
.advance-select-tag | Component | The .advance-select-tag component class is utilized for wrapperClasses when :mode is configured as tag. |
select-opened:{tw-utility-class} | Modifier | The modifier allows setting Tailwind classes when a select has been opened. |
select-disabled:{tw-utility-class} | Modifier | The modifier allows setting Tailwind classes when a select has the disabled attribute. |
selected: | Modifier | The modifier allows setting Tailwind classes when a option is selected. |
advance-select-xs | Responsive | Apply advance-select-xs along with advance-select-toggle to implement a extra small size. |
advance-select-sm | Responsive | Apply advance-select-sm along with advance-select-toggle to implement a small size. |
advance-select-lg | Responsive | Apply advance-select-lg along with advance-select-toggle to implement a large size. |
A basic usage of advanced select.
Please refer to the Basic option section for all basic functionalities.
<div class="max-w-sm">
<select
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
To customize the placeholder with either an icon or plain text, you can provide custom HTML within the "placeholder:"
option as demonstrated below.
<div class="max-w-sm">
<select
data-select='{
"placeholder": "<span class=\"inline-flex items-center\"><span class=\"icon-[tabler--filter] flex-shrink-0 size-4 me-2\"></span> Filter</span>",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
Choose between different sizes of advanced selects by using advance-select-xs
for extra small size ,advance-select-sm
for small size and advance-select-lg
for large size within the "toggleClasses":
section. You can also create a custom size using Tailwind’s padding utility p-*
.
<div class="max-w-sm space-y-4">
<!-- Extra small -->
<div class="align w-full">
<select
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle advance-select-xs",
"dropdownClasses": "advance-select-menu",
"dropdownSpace": 5,
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-3 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
<!-- Small -->
<div class="w-full">
<select
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle advance-select-sm",
"dropdownClasses": "advance-select-menu",
"dropdownSpace": 8,
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-3 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
<!-- Default -->
<div class="w-full">
<select
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
<!-- Large -->
<div class="w-full">
<select
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle advance-select-lg",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-5 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
</div>
Success state can be show using is-valid
class.
<div class="max-w-sm">
<label class="form-control">
<div class="label">
<span class="label-text">Top left label</span>
<span class="label-text-alt">Top Right label</span>
</div>
<select
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="is-valid hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
<div class="label">
<span class="label-text-alt">Bottom Left label</span>
<span class="label-text-alt">Bottom right label</span>
</div>
</label>
</div>
Error state can be show using is-invalid
class.
<div class="max-w-sm">
<label class="form-control">
<div class="label">
<span class="label-text">Top left label</span>
<span class="label-text-alt">Top Right label</span>
</div>
<select
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="is-invalid hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
<div class="label">
<span class="label-text-alt">Bottom Left label</span>
<span class="label-text-alt">Bottom Right label</span>
</div>
</label>
</div>
To render selects as inactive, include the disabled boolean attribute within the select
element and utilize the class select-disabled:*
within the "toggleClasses":
section for styling purposes. If you’re employing advance-select-toggle
, disabled state styling has been incorporated.
<div class="max-w-sm">
<select
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/50 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
disabled
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
Select multiple options.
Please refer to the Multiple option section for all multiple related functionalities.
<div class="max-w-sm">
<select
multiple
data-select='{
"placeholder": "Select multiple options...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
Select multiple options and add an option template.
<div class="max-w-sm">
<!-- Select -->
<select
multiple=""
data-select='{
"placeholder": "Select multiple options...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><div class=\"me-2\" data-icon></div><div><div class=\"text-sm text-base-content/90 \" data-title></div></div><div class=\"ms-auto\"><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option
selected=""
value="1"
data-select-option='{ "icon": "<img class=\"shrink-0 size-6 rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-5.png\" alt=\"Ethan Caldwell\" />"}'
>
Ethan Caldwell
</option>
<option
value="2"
data-select-option='{ "icon": "<img class=\"shrink-0 size-6 rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-2.png\" alt=\"Isabella Martinez\" />"}'
>
Isabella Martinez
</option>
<option
value="3"
data-select-option='{ "icon": "<img class=\"shrink-0 size-6 rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-8.png\" alt=\"Ava Thompson\" />"}'
>
Ava Thompson
</option>
</select>
<!-- End Select -->
</div>
If you only want to display the number of the selected option in multiple select. then use "toggleCountText":
.
<div class="max-w-sm">
<select
multiple
data-select='{
"placeholder": "Select multiple options...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"toggleCountText": "selected",
"toggleCountTextMinItems": 2,
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
Use multiple
tag to enable counter option that counts the number of selected options.
<!-- Select -->
<div class="max-w-sm">
<select
id="multi-cond-count"
multiple=""
data-select='{
"placeholder": "Select multiple options...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"toggleSeparators": {
"betweenItemsAndCounter": "&"
},
"toggleCountText": "selected",
"toggleCountTextMinItems": 3,
"toggleCountTextMode": "nItemsAndCount",
"dropdownClasses": "advance-select-menu max-h-44 vertical-scrollbar rounded-scrollbar",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option>Name</option>
<option>Email address</option>
<option>Description</option>
<option>User ID</option>
<option>Address</option>
<option>City</option>
<option>Country</option>
</select>
<!-- End Select -->
</div>
<div class="mt-4 flex flex-wrap gap-2">
<button type="button" id="clear-btn" class="btn btn-outline btn-primary btn-sm">Clear</button>
</div>
To enable searching within the dropdown, set "hasSearch": true
.
Please refer to the Search option section for all search-related functionalities.
<div class="max-w-sm">
<select
data-select='{
"placeholder": "Select your sign",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"hasSearch": true,
"dropdownClasses": "advance-select-menu max-h-52 pt-0 vertical-scrollbar rounded-scrollbar",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option value="aries">Aries</option>
<option value="taurus">Taurus</option>
<option value="gemini">Gemini</option>
<option value="cancer">Cancer</option>
<option value="leo">Leo</option>
<option value="virgo">Virgo</option>
<option value="libra">Libra</option>
<option value="scorpio">Scorpio</option>
<option value="sagittarius">Sagittarius</option>
<option value="capricorn">Capricorn</option>
<option value="aquarius">Aquarius</option>
<option value="pisces">Pisces</option>
</select>
</div>
Create a custom select with removable tags using the provided options:
"wrapperClasses"
: This option wraps the select element. Apply the classadvance-select-tag
for default styling."tagsItemTemplate"
: This section is dedicated to styling the selected tag.- Use
data-select-option
to customize options.
Please see the Tags option section for tag-related functionalities.
<div class="max-w-sm">
<select
multiple
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu max-h-48 -ms-1 vertical-scrollbar rounded-scrollbar",
"optionClasses": "advance-select-option selected:active",
"mode": "tags",
"wrapperClasses": "advance-select-tag flex-wrap",
"tagsItemTemplate": " <div class=\"flex flex-nowrap items-center relative z-10 bg-base-100 border border-base-content/25 rounded-full p-1 m-1\"> <div class=\"size-6 me-1\" data-icon></div> <div class=\"whitespace-nowrap text-base-content/90\" data-title></div> <div class=\"btn btn-sm min-h-0 size-5 btn-circle btn-soft btn-secondary ms-2 \" data-remove><span class=\"icon-[tabler--x] flex-shrink-0 size-3\"></span></div> </div>",
"tagsInputClasses": "py-3 px-2 rounded-lg order-1 text-sm outline-none",
"optionTemplate": "<div class=\"flex items-center\"> <div class=\"size-8 me-2\" data-icon></div><div><div class=\"text-sm font-semibold text-base-content/90\" data-title></div> <div class=\"text-xs text-base-content/80\" data-description></div></div><div class=\"flex justify-between items-center flex-1\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div> </div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
aria-label="Advance select"
>
<option value="">Choose</option>
<option
selected=""
value="1"
data-select-option='{
"description": "mark",
"icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png\" alt=\"Mark Gilbert\" />"}'
>
Mark Gilbert
</option>
<option
value="2"
data-select-option='{
"description": "eug",
"icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-6.png\" alt=\"Eugenia Parsons\" />"}'
>
Eugenia Parsons
</option>
<option
value="3"
data-select-option='{
"description": "francis",
"icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-8.png\" alt=\"Francis Byrd\" />"}'
>
Francis Byrd
</option>
<option
value="4"
data-select-option='{
"description": "rogers",
"icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-3.png\" alt=\"Jayden Rogers\" />"}'
>
Jayden Rogers
</option>
</select>
</div>
Example of custom option with avatar and icons. Using data-select-option
for providing content for the option.
Basic example of options with icon.
<div class="max-w-sm">
<select
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"me-2\" data-icon></span><span class=\"text-base-content/90\" data-title></span></button>",
"toggleClasses": "advance-select-toggle items-center",
"dropdownClasses": "advance-select-menu max-h-44",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div><div class=\"flex items-center\"> <div class=\"me-2\" data-icon></div> <div class=\"font-semibold text-base-content/90\" data-title></div> </div> <div class=\"mt-1.5 text-sm text-base-content/80\" data-description></div> </div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option
value="5"
selected
data-select-option='{
"description": "Recommended for beginners.",
"icon": "<span class=\"icon-[tabler--circle-check] flex-shrink-0 size-4 text-base-content/90 mt-1\"></span>"}'
>
Beginner-friendly
</option>
<option
value="6"
data-select-option='{
"description": "Suitable for advanced users.",
"icon": "<span class=\"icon-[tabler--target] flex-shrink-0 size-4 text-base-content/90 mt-1\"></span>"}'
>
Advanced users
</option>
</select>
</div>
Basic example of options with avatar.
<div class="max-w-sm">
<select
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"size-6 me-2\" data-icon></span><span class=\"text-base-content/90\" data-title></span></button>",
"toggleClasses": "advance-select-toggle items-center",
"dropdownClasses": "advance-select-menu max-h-44 vertical-scrollbar rounded-scrollbar",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex items-start\"> <div class=\"size-6 me-2\" data-icon></div> <div> <div class=\"text-base-content/90\" data-title></div><div></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option
selected=""
value="1"
data-select-option='{ "icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png\" alt=\"Mark Gilbert\" />"}'
>
Mark Gilbert
</option>
<option
value="2"
data-select-option='{ "icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-6.png\" alt=\"Eugenia Parsons\" />"}'
>
Eugenia Parsons
</option>
<option
value="3"
data-select-option='{ "icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-8.png\" alt=\"Francis Byrd\" />"}'
>
Francis Byrd
</option>
<option
value="4"
data-select-option='{ "icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-3.png\" alt=\"Jayden Rogers\" />"}'
>
Jayden Rogers
</option>
</select>
</div>
Basic usage in modal window.
Dialog Title
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="select-modal" data-overlay="#select-modal" > Open modal </button>
<div id="select-modal" class="overlay modal overlay-open:opacity-100 hidden" role="dialog" tabindex="-1">
<div class="modal-dialog overlay-open:opacity-100">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Dialog Title</h3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#select-modal" >
<span class="icon-[tabler--x] size-4"></span>
</button>
</div>
<div class="modal-body h-72">
<select
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle mt-0.5",
"dropdownClasses": "advance-select-menu shadow-none border border-base-content/25",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#select-modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Utilize the addOption
and removeOption
methods to add or remove options, respectively.
<div class="mb-4 flex gap-3">
<button class="btn btn-primary" id="add-option">Add</button>
<button class="btn btn-primary" id="remove-option">Remove</button>
</div>
<div class="max-w-sm">
<select
id="add-remove-select"
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu max-h-48 vertical-scrollbar rounded-scrollbar",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
The destroy
method is provided to facilitate the destruction of a select element.
<div class="max-w-sm">
<select
id="destroy-select"
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span id=\"select-icon\" class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
<div class="mt-4 flex gap-3">
<button class="btn btn-primary accordion" id="destroy-btn">Destroy</button>
<button class="btn btn-primary accordion" id="reinit-btn" disabled>Reinitialize</button>
</div>
Provides setValue
method that helps to set a value programmatically.
<div class="max-w-sm">
<!-- Select -->
<select
id="single-setter"
data-select='{
"placeholder": "Select with button",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"size-6 me-2\" data-icon></span><span class=\"text-base-content/90\" data-title></span></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex items-start\"> <div class=\"size-6 me-2\" data-icon></div> <div> <div class=\"text-base-content/90\" data-title></div><div></div>",
"extraMarkup": "<span id=\"select-icon\" class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option
selected=""
value="1"
data-select-option='{ "icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-5.png\" alt=\"Ethan Caldwell\" />"}'
>
Ethan Caldwell
</option>
<option
value="2"
data-select-option='{ "icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-2.png\" alt=\"Isabella Martinez\" />"}'
>
Isabella Martinez
</option>
<option
value="3"
data-select-option='{ "icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-8.png\" alt=\"Ava Thompson\" />"}'
>
Ava Thompson
</option>
</select>
<!-- End Select -->
</div>
<div class="mt-4 flex flex-wrap gap-2">
<button type="button" id="set-to-2" class="btn btn-sm btn-primary">
Set value to "Isabella Martinez"
</button>
<button type="button" id="set-to-3" class="btn btn-sm btn-primary">Set value to "Ava Thompson"</button>
</div>
<div class="mt-3 flex flex-wrap gap-2">
<button type="button" id="reset-single-value" class="btn btn-sm btn-soft btn-secondary">Reset value</button>
</div>
Provides setValue
method that helps to set a value programmatically.
<div class="max-w-sm">
<!-- Select -->
<select
id="multiple-setter"
multiple=""
data-select='{
"placeholder": "Select multiple option with button",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex items-start\"> <div class=\"size-6 me-2\" data-icon></div> <div> <div class=\"text-base-content/90\" data-title></div><div></div>",
"extraMarkup": "<span id=\"select-icon\" class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option
value="1"
data-select-option='{ "icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-5.png\" alt=\"Ethan Caldwell\" />"}'
>
Ethan Caldwell
</option>
<option
value="2"
data-select-option='{ "icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-2.png\" alt=\"Isabella Martinez\" />"}'
>
Isabella Martinez
</option>
<option
value="3"
data-select-option='{ "icon": "<img class=\"rounded-full\" src=\"https://cdn.flyonui.com/fy-assets/avatar/avatar-8.png\" alt=\"Ava Thompson\" />"}'
>
Ava Thompson
</option>
</select>
</div>
<div class="mt-4 flex flex-wrap gap-2">
<button type="button" id="set-to-1-and-2" class="btn btn-sm btn-primary">
Set value to "Isabella Martinez" and ""
</button>
<button type="button" id="set-to-2-and-3" class="btn btn-sm btn-primary">
Set value to "Ava Thompson" and ""
</button>
</div>
<div class="mt-3 flex flex-wrap gap-2">
<button type="button" id="reset-multiple-value" class="btn btn-sm btn-soft btn-secondary">Reset value</button>
</div>
PARAMETERS | DESCRIPTION | OPTIONS | DEFAULT VALUE |
---|---|---|---|
Basic Options | |||
data-select | Used to create a custom select options. | - | - |
data-select-option | Used to add a custom option with a description and an icon. | - | - |
:placeholder | Define a default placeholder when nothing is selected. | string | Select... |
:toggleClasses | Define CSS classes for the selects’ toggle (styles the button). CSS classes must be separated by a space. | string | - |
:toggleTag | Define the markup structure for the select toggle. | One line HTML markup | — |
:dropdownClasses | Define CSS classes for the dropdown menu. CSS classes must be separated by a space. | string | - |
:optionClasses | Styling is applied to individual options, so use Tailwind CSS classes to style the options. | string | - |
:optionTemplate | Define template for the single option. It could contain:
| One line HTML markup | - |
:extraMarkup | Provide markup that can be added to the select wrapper for decorative purposes. | One line HTML markup or Array of one line HTML markup | - |
:isOpened | If the value is true , the select is opened. | boolean | false |
:dropdownSpace | You have the ability to adjust the spacing between the select element and its menu. | number | 10 |
:optionTag | Define the markup for the wrapper tag of a single option.Do not update . This HTML markup must remain as is. Changing it could potentially cause issues. | One line HTML markup | <div></div> |
:descriptionClasses | Specify CSS classes for the description within each individual option. Ensure that the classes are separated by a space. | string | - |
:iconClasses | Specify CSS classes for the icons within each individual option. Ensure that the classes are separated by a space. | string | - |
Multiple Options | |||
:toggleCountText | This feature is exclusive to multiple select. It defines the text to appear after the counter and activates the counting mode. | string | - |
:toggleCountTextMinItems | This feature is specific to multiple selects. It sets the minimum number of selected items required to activate the counting mode. | number | 1 |
:toggleSeparators | Define separators for the toggle options in the selects. | object | - |
:toggleSeparators:items | Define which separator will be used for separate selected items. | string` | , |
:toggleSeparators:betweenItemsAndCounter | Define which separator will be used for separate selected items and counter text. | string | and |
:toggleCountTextMode | This option is only available for multiple select. controls the display of the contents of the button title. | ‘countAfterLimit’ or ’nItemsAndCount’ | countAfterLimit |
Search Options | |||
:hasSearch | If the value is true , include a search field within the dropdown. | boolean | false |
:preventSearchFocus | If the value is true, disable autofocus for the search field within the dropdown list. | boolean | false |
:searchWrapperTemplate | Define the markup for the wrapper tag for the search.Do not update . This HTML markup must remain as is. Changing it could potentially cause issues. | One line HTML markup | <div></div> |
:searchWrapperClasses | Provide the option to style the search wrapper using Tailwind classes. Make sure the classes are separated by spaces. | string | bg-base-100 sticky top-0 mb-2 px-2 pt-3 |
:searchClasses | Apply Tailwind CSS classes to style the search bar. Ensure that the classes are separated by a space. | string | border-base-content/40 focus:border-primary focus:ring-primary bg-base-100 block w-full rounded-btn border px-3 py-2 text-base focus:ring-1 |
:searchPlaceholder | This option is applicable only when the :hasSearch attribute is set to true . It specifies the placeholder text for the search field within the dropdown. | string | Search... |
:searchNoResultText | Specifies the text to be shown when no results are found. | string | No options found... |
:searchNoResultClasses | Specify CSS classes for the wrapper surrounding the “no results” message. Ensure that the classes are separated by a space. | string | block advance-select-option advance-select-option class is a custom class. Refer to the class table for more details. |
Tags Options | |||
:mode | Define a select mode. | default or tags | default |
:dropdownTag | Specify the markup for the dropdown accordingly.Do not update . This HTML markup must remain as is. Changing it could potentially cause issues. | One line HTML markup | <div></div> |
:wrapperClasses | Define CSS classes for the wrapper of the select elements. These classes are applied to the main wrapper. Ensure that the classes are separated by spaces. | string | - |
:tagsItemTemplate | Define template for the single option. It could contain:
| One line HTML markup | - |
:tagsItemClasses | Apply styling to the select tag wrapper. Ensure that the classes are separated by spaces. | string | - |
:tagsInputClasses | This work as input for search. Specify CSS classes for the input field within the dropdown list. Ensure that the classes are separated by spaces. | string | - |
:isAddTagOnEnter | When you search and press Enter, it creates an entry within the options. This setting determines whether a tag will be added when the Enter key is pressed. | boolean | true |
The HSSelect
object is contained within the global window
object.
METHOD | DESCRIPTION |
---|---|
PUBLIC METHODS | |
destroy() | Destroys select. |
open() | Open dropdown list. |
close() | Close dropdown list. |
setValue() | Set the select value: use a string for a single select and an array for a multiple select. |
addOption(items) | Include an option, or potentially multiple options, to the select menu. Each individual option should adhere to this interface.{ title: string; val: string; options?: { description: string; icon: string; }; } |
removeOption(val) | Remove an option by its value (multiple options possible). |
recalculateDirection() | Trigger a recalculation for the dropdown list. |
STATIC METHODS | |
HSSelect.getInstance(target, isInstance) | Returns the element linked to the target .
|
HSSelect.close(target) . | Close the element linked to the target .
|
HSSelect.closeCurrentlyOpened(evtTarget) | Close the element linked to the target .
|
Below is a demonstration of how to use the methods. Assign an ID to the data-select
element. To test other methods, copy the following code into your console and click the button.
<button class="btn btn-primary mb-4" id="open-btn">Open</button>
<div class="max-w-sm">
<select
id="method-select"
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu max-h-44 vertical-scrollbar rounded-scrollbar",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="--prevent-on-load-init hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
<script>
window.addEventListener('load', () =>
const select = new HSSelect(document.querySelector('#method-select'))
const openBtn = document.querySelector('#open-btn')
openBtn.addEventListener('click', () => {
select.open()
})
)
</script>
Open item (public method).
--prevent-on-load-init
class to the select element before initializing it with new
.<select id="select" class="--prevent-on-load-init" data-select>
...
</select>
// This method is used in above example.
const select = new HSSelect(document.querySelector('#method-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('#method-select', true);
const openBtn = document.querySelector('#open-btn');
openBtn.addEventListener('click', () => {
element.open();
});
Set value.
const select = HSSelect.getInstance('#select');
const setValueBtn = document.querySelector('#set-value-btn');
setValueBtn.addEventListener('click', () => {
select.setValue('address');
// if select is multiple
// select.setValue(['address', 'email']);
});
Add options (public method).
const select = window.HSSelect.getInstance('#add-remove-select');
const addOptionsBtn = document.querySelector('#add-option');
addOptionsBtn.addEventListener('click', () => {
select.addOption([
{
title: "James Collins",
val: "1",
},
{
title: "Amanda Harvey",
val: "2",
}
]);
});
Remove options (public method).
const select = window.HSSelect.getInstance('#add-remove-select');
const removeOptionsBtn = document.querySelector('#remove-option');
removeOptionsBtn.addEventListener('click', () => {
select.removeOption(["1", "2"]);
});
Destroy select (public method).
const destroyBtn = document.querySelector('#destroy-btn');
const select = window.HSSelect.getInstance('#destroy-select');
destroyBtn.addEventListener('click', () => {
select.destroy();
});
METHOD | DESCRIPTION | RETURNING VALUE |
---|---|---|
on:change | Called when any select is changed. | Current value |
Display a console log message when an option is selected.
<div class="max-w-sm">
<select
id="event-select"
data-select='{
"placeholder": "Select option...",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "advance-select-toggle",
"dropdownClasses": "advance-select-menu",
"optionClasses": "advance-select-option selected:active",
"optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"icon-[tabler--check] flex-shrink-0 size-4 text-primary hidden selected:block \"></span></div>",
"extraMarkup": "<span class=\"icon-[tabler--caret-up-down] flex-shrink-0 size-4 text-base-content/90 absolute top-1/2 end-3 -translate-y-1/2 \"></span>"
}'
class="hidden"
>
<option value="">Choose</option>
<option value="name">Full Name</option>
<option value="email">Email Address</option>
<option value="description">Project Description</option>
<option value="user_id">User Identification Number</option>
</select>
</div>
<script>
window.addEventListener('load', () =>
const el = HSSelect.getInstance('#event-select')
el.on('change', instance => {
console.log('selected')
})
)
</script>
When select changes event example.
const el = HSSelect.getInstance(document.getElementById('event-select'));
el.on('change', (instance) => {console.log("selected")});