Features
Basic Usage
The most common use case - selecting one option from a dropdown.
< select
class = "kt-select"
data-kt-select = "true"
data-kt-select-placeholder = "Select a framework"
data-kt-select-config = '{
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
}'
>
< option value = "react" >React</ option >
< option value = "nextjs" >Next.js</ option >
< option value = "angular" >Angular</ option >
< option value = "vue" >Vue</ option >
< option value = "svelte" >Svelte</ option >
< option value = "ember" >Ember</ option >
< option value = "nuxt" >Nuxt.js</ option >
< option value = "remix" >Remix</ option >
</ select >
Placeholder Text
Add placeholder text when no option is selected.
< select
class = "kt-select"
data-kt-select = "true"
data-kt-select-placeholder = "Please select a field type..."
data-kt-select-config = '{
"placeholder": "Select a country",
"placeholderClass": "border-b border-dashed border-primary",
"placeholderTemplate": " < span class=\"text-primary\" > {{placeholder}} < /span > "
}'
>
< option value = "apple" >Apple</ option >
< option value = "google" >Google</ option >
< option value = "amazon" >Amazon</ option >
< option value = "facebook" >Facebook</ option >
< option value = "twitter" >Twitter</ option >
< option value = "keenthemes" >Keenthemes</ option >
</ select >
Disabled Select
Disable the entire select component.
< select
disabled = ""
class = "kt-select"
data-kt-select = "true"
data-kt-select-disabled = "true"
data-kt-select-placeholder = "Select a libray..."
>
< option value = "reui" >ReUI</ option >
< option value = "ktui" disabled = "" >KtUI</ option >
< option value = "metronic" >Metronic</ option >
< option value = "keenthemes" >Keenthemes</ option >
</ select >
Disabled Option
Disable individual options within the select.
< select
class = "kt-select"
data-kt-select = "true"
data-kt-select-placeholder = "Select a framework..."
>
< option value = "react" >React</ option >
< option value = "nextjs" disabled = "" >Next.js</ option >
< option value = "angular" >Angular</ option >
< option value = "vue" >Vue</ option >
< option value = "svelte" disabled = "" >Svelte</ option >
< option value = "ember" >Ember</ option >
< option value = "nuxt" >Nuxt.js</ option >
< option value = "remix" >Remix</ option >
</ select >
Size Variants
Different size options for various use cases.
< div class = "flex flex-col gap-4" >
< select
class = "kt-select kt-select-sm"
data-kt-select = "true"
data-kt-select-multiple = "true"
data-kt-select-placeholder = "Select a framework"
data-kt-select-config = '{
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
}'
>
< option value = "react" >React</ option >
< option value = "nextjs" >Next.js</ option >
< option value = "angular" >Angular</ option >
< option value = "vue" >Vue</ option >
< option value = "svelte" >Svelte</ option >
< option value = "ember" >Ember</ option >
< option value = "nuxt" >Nuxt.js</ option >
< option value = "remix" >Remix</ option >
< option value = "svelte" >Svelte</ option >
< option value = "ember" >Ember</ option >
< option value = "nuxt" >Nuxt.js</ option ></ select
>< select
class = "kt-select kt-select-md"
data-kt-select = "true"
data-kt-select-multiple = "true"
data-kt-select-placeholder = "Select a framework"
data-kt-select-config = '{
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
}'
>
< option value = "react" >React</ option >
< option value = "nextjs" >Next.js</ option >
< option value = "angular" >Angular</ option >
< option value = "vue" >Vue</ option >
< option value = "svelte" >Svelte</ option >
< option value = "ember" >Ember</ option >
< option value = "nuxt" >Nuxt.js</ option >
< option value = "remix" >Remix</ option >
< option value = "svelte" >Svelte</ option >
< option value = "ember" >Ember</ option >
< option value = "nuxt" >Nuxt.js</ option ></ select
>< select
class = "kt-select kt-select-lg"
data-kt-select = "true"
data-kt-select-multiple = "true"
data-kt-select-placeholder = "Select a framework"
data-kt-select-config = '{
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
}'
>
< option value = "react" >React</ option >
< option value = "nextjs" >Next.js</ option >
< option value = "angular" >Angular</ option >
< option value = "vue" >Vue</ option >
< option value = "svelte" >Svelte</ option >
< option value = "ember" >Ember</ option >
< option value = "nuxt" >Nuxt.js</ option >
< option value = "remix" >Remix</ option >
< option value = "svelte" >Svelte</ option >
< option value = "ember" >Ember</ option >
< option value = "nuxt" >Nuxt.js</ option >
</ select >
</ div >
Multiple Selection
Select multiple options with comma-separated display.
< select
class = "kt-select"
data-kt-select = "true"
data-kt-select-multiple = "true"
data-kt-select-max-selections = "3"
data-kt-select-placeholder = "Select cities..."
data-kt-select-config = '{
"displaySeparator": " | "
}'
>
< option value = "amsterdam" >Amsterdam</ option >
< option value = "barcelona" >Barcelona</ option >
< option value = "london" >London</ option >
< option value = "new-york" >New York</ option >
< option value = "paris" >Paris</ option >
< option value = "rome" >Rome</ option >
< option value = "tokyo" >Tokyo</ option >
</ select >
Maximum Selection
Limit the number of selectable options.
< select
class = "kt-select"
data-kt-select = "true"
data-kt-select-multiple = "true"
data-kt-select-max-selections = "3"
data-kt-select-placeholder = "Select up to 3 options"
>
< option value = "react" >React</ option >
< option value = "nextjs" >Next.js</ option >
< option value = "angular" >Angular</ option >
< option value = "vue" >Vue</ option >
< option value = "svelte" >Svelte</ option >
< option value = "ember" >Ember</ option >
< option value = "nuxt" >Nuxt.js</ option >
</ select >
Visual tags for selected items with enhanced functionality.
Tags that include icons for each selected option.
Simple tags mode for multiple selection.
Tags with pre-selected values.
Search & Filtering
Search
Enable search within the dropdown options.
< select
class = "kt-select"
data-kt-select = "true"
data-kt-select-enable-search = "true"
data-kt-select-search-placeholder = "Search..."
data-kt-select-placeholder = "Select a brand..."
data-kt-select-config = '{
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
}'
>
< option value = "apple" >Apple</ option >
< option value = "google" >Google</ option >
< option value = "amazon" >Amazon</ option >
< option value = "facebook" >Facebook</ option >
< option value = "twitter" >Twitter</ option >
< option value = "keenthemes" >Keenthemes</ option >
< option value = "github" >GitHub</ option >
< option value = "instagram" >Instagram</ option >
< option value = "youtube" >YouTube</ option >
< option value = "linkedin" >LinkedIn</ option >
< option value = "whatsapp" >WhatsApp</ option >
< option value = "telegram" >Telegram</ option >
< option value = "tiktok" >TikTok</ option >
< option value = "snapchat" >Snapchat</ option >
< option value = "pinterest" >Pinterest</ option >
< option value = "twitch" >Twitch</ option >
< option value = "vimeo" >Vimeo</ option >
< option value = "yelp" >Yelp</ option >
< option value = "spotify" >Spotify</ option >
< option value = "whatsapp" >WhatsApp</ option >
< option value = "telegram" >Telegram</ option >
< option value = "tiktok" >TikTok</ option >
< option value = "snapchat" >Snapchat</ option >
</ select >
Remote Data
Load options dynamically from API endpoints.
< select
class = "kt-select"
data-kt-select = "true"
data-kt-select-remote = "true"
data-kt-select-data-url = "https://jsonplaceholder.typicode.com/users"
data-kt-select-data-field-value = "id"
data-kt-select-data-field-text = "name"
data-kt-select-enable-search = "true"
data-kt-select-search-param = "q"
data-kt-select-search-min-length = "2"
data-kt-select-search-debounce = "300"
data-kt-select-debug = "true"
data-kt-select-placeholder = "Search users..."
></ select >
Icons
Add icons to options for better visual identification.
< select
class = "kt-select"
data-kt-select = "true"
data-kt-select-placeholder = "Select an option..."
data-kt-select-config = '{
"displayTemplate": " < div class=\"flex items-center gap-2\" > {{icon}} < span class=\"text-foreground\" > {{text}} < /span >< /div > ",
"optionTemplate": " < div class=\"flex items-center gap-2\" > {{icon}} < span class=\"text-foreground\" > {{text}} < /span >< /div >< svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\" >< path d=\"M20 6 9 17l-5-5\"/ >< /svg >< /div > "
}'
>
< option
value = "hardwere"
data-kt-select-option = '{"icon": " < svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\" >< circle cx=\"19\" cy=\"6\" r=\"3\"/ >< path d=\"M22 12v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9\/ >< path d=\"M12 17v4\/ >< path d=\"M8 21h8\"/ >< /svg > "}'
>
Hardwere
</ option >
< option
value = "software"
data-kt-select-option = '{"icon": " < svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\" >< path d=\"M10 10.5 8 13l2 2.5\/ >< path d=\"m14 10.5 2 2.5-2 2.5\/ >< path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z\"/ >< /svg > "}'
>
Software
</ option >
< option
value = "network"
data-kt-select-option = '{"icon": " < svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\" >< rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/ >< rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/ >< rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\"/ >< path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\/ >< path d=\"M12 12V8\/ >< /svg > "}'
>
Network
</ option >
< option
value = "storage"
data-kt-select-option = '{"icon": " < svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\" >< ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"/ >< path d=\"M3 5V19A9 3 0 0 0 21 19V5\/ >< path d=\"M3 12A9 3 0 0 0 21 12\"/ >< /svg > "}'
>
Storage
</ option >
< option
value = "security"
data-kt-select-option = '{"icon": " < svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\" >< circle cx=\"12\" cy=\"16\" r=\"1\"/ >< rect x=\"3\" y=\"10\" width=\"18\" height=\"12\" rx=\"2\"/ >< path d=\"M7 10V7a5 5 0 0 1 10 0v3\"/ >< /svg > "}'
>
Storage
</ option >
</ select >
Multiple Icons
Icons in multiple selection mode.
< select
class = "kt-select kt-select-lg"
data-kt-select = "true"
data-kt-select-multiple = "true"
data-kt-select-placeholder = "Select an option"
data-kt-select-config = '{
"displaySeparator": ", ",
"displayTemplate": " < div class=\"flex items-center gap-2 [ &> svg]:size-3.5\" > {{icon}} < span class=\"text-foreground\" > {{text}} < /span >< /div > ",
"optionTemplate": " < div class=\"flex items-center gap-2\" > {{icon}} < span class=\"text-foreground\" > {{text}} < /span >< /div >< svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\" >< path d=\"M20 6 9 17l-5-5\"/ >< /svg >< /div > "
}'
>
< option
value = "hardwere"
data-kt-select-option = '{"icon": " < svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\" >< circle cx=\"19\" cy=\"6\" r=\"3\"/ >< path d=\"M22 12v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9\/ >< path d=\"M12 17v4\/ >< path d=\"M8 21h8\"/ >< /svg > "}'
>
Hardwere
</ option >
< option
value = "software"
data-kt-select-option = '{"icon": " < svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\" >< path d=\"M10 10.5 8 13l2 2.5\/ >< path d=\"m14 10.5 2 2.5-2 2.5\/ >< path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z\"/ >< /svg > "}'
>
Software
</ option >
< option
value = "network"
data-kt-select-option = '{"icon": " < svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\" >< rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/ >< rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/ >< rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\"/ >< path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\/ >< path d=\"M12 12V8\/ >< /svg > "}'
>
Network
</ option >
< option
value = "storage"
data-kt-select-option = '{"icon": " < svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\" >< ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"/ >< path d=\"M3 5V19A9 3 0 0 0 21 19V5\/ >< path d=\"M3 12A9 3 0 0 0 21 12\"/ >< /svg > "}'
>
Storage
</ option >
< option
value = "security"
data-kt-select-option = '{"icon": " < svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\" >< circle cx=\"12\" cy=\"16\" r=\"1\"/ >< rect x=\"3\" y=\"10\" width=\"18\" height=\"12\" rx=\"2\"/ >< path d=\"M7 10V7a5 5 0 0 1 10 0v3\"/ >< /svg > "}'
>
Security
</ option >
</ select >
Avatar
User avatars in select options.
< select
class = "kt-select"
data-kt-select = "true"
data-kt-select-enable-search = "true"
data-kt-select-search-placeholder = "Search..."
data-kt-select-placeholder = "Select a user..."
data-kt-select-config = '{
"displayTemplate": " < div class=\"flex items-center gap-2\" >< img src=\"{{avatar}}\" alt=\"{{text}}\" class=\"size-5 border border-input rounded-full\" / > < span class=\"text-foreground\" > {{text}} < /span >< /div > ",
"optionTemplate": " < div class=\"flex items-center gap-2\" >< img src=\"{{avatar}}\" alt=\"{{text}}\" class=\"size-6 border border-input rounded-full\" / > < span class=\"text-foreground\" > {{text}} < /span >< /div >< svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\" >< path d=\"M20 6 9 17l-5-5\"/ >< /svg > ",
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
}'
>
< option
value = "1"
data-kt-select-option = '{"avatar": "https://randomuser.me/api/portraits/women/68.jpg"}'
>
Ana Nilson
</ option >
< option
value = "2"
data-kt-select-option = '{"avatar": "https://randomuser.me/api/portraits/men/46.jpg"}'
>
Robert Brown
</ option >
< option
value = "3"
data-kt-select-option = '{"avatar": "https://randomuser.me/api/portraits/men/29.jpg"}'
>
John Doe
</ option >
< option
value = "4"
data-kt-select-option = '{"avatar": "https://randomuser.me/api/portraits/women/48.jpg"}'
selected = ""
>
Nina Erin
</ option >
< option
value = "5"
data-kt-select-option = '{"avatar": "https://randomuser.me/api/portraits/men/58.jpg"}'
>
Mark Larson
</ option >
< option
value = "6"
data-kt-select-option = '{"avatar": "https://randomuser.me/api/portraits/men/68.jpg"}'
>
Nick Strong
</ option >
< option
value = "7"
data-kt-select-option = '{"avatar": "https://randomuser.me/api/portraits/women/68.jpg"}'
>
Ana Nilson
</ option >
< option
value = "8"
data-kt-select-option = '{"avatar": "https://randomuser.me/api/portraits/women/58.jpg"}'
>
Kate Leo
</ option >
< option
value = "9"
data-kt-select-option = '{"avatar": "https://randomuser.me/api/portraits/men/38.jpg"}'
>
Elon White
</ option >
< option
value = "10"
data-kt-select-option = '{"avatar": "https://randomuser.me/api/portraits/men/8.jpg"}'
>
Bill Smith
</ option >
</ select >
Country Selection
Country selection with flag icons.
< select
class = "kt-select"
data-kt-select = "true"
data-kt-select-enable-search = "true"
data-kt-select-search-placeholder = "Search..."
data-kt-select-placeholder = "Select a country..."
data-kt-select-config = '{
"displayTemplate": " < div class=\"flex items-center leading-none gap-2\" > {{flag}} < span class=\"text-foreground\" > {{text}} < /span >< /div > ",
"optionTemplate": " < div class=\"flex items-center leading-none gap-2\" > {{flag}} < span class=\"text-foreground\" > {{text}} < /span >< /div >< svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\" >< path d=\"M20 6 9 17l-5-5\"/ >< /svg >< /div > "
}'
>
< option value = "usa" data-kt-select-option = '{"flag": "🇺🇸"}' >USA</ option >
< option value = "germany" data-kt-select-option = '{"flag": "🇩🇪"}' >
Germany
</ option >
< option value = "italy" data-kt-select-option = '{"flag": "🇮🇹"}' >Italy</ option >
< option value = "france" data-kt-select-option = '{"flag": "🇫🇷"}' >France</ option >
< option value = "spain" data-kt-select-option = '{"flag": "🇪🇸"}' >Spain</ option >
< option value = "canada" data-kt-select-option = '{"flag": "🇨🇦"}' >Canada</ option >
< option value = "australia" data-kt-select-option = '{"flag": "🇦🇺"}' >
Australia
</ option >
< option value = "japan" data-kt-select-option = '{"flag": "🇯🇵"}' >Japan</ option >
</ select >
Description
Options with additional description text.
< select
class = "kt-select"
data-kt-select = "true"
data-kt-select-placeholder = "Select an option..."
data-kt-select-config = '{
"optionTemplate": " < div class=\"flex items-center grow gap-2\" >< div class=\"flex flex-col gap-0.5\" >< span class=\"font-semibold text-foreground\" > {{text}} < /span >< span class=\"text-xs text-muted-foreground\" > {{desc}} < /span >< /div >< svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\" >< path d=\"M20 6 9 17l-5-5\"/ >< /svg >< /div > "
}'
>
< option
value = "full_access"
data-kt-select-option = '{"desc": "Can modify and delete"}'
>
Full access
</ option >
< option
value = "read_write"
data-kt-select-option = '{"desc": "Can read and write"}'
>
Read and write
</ option >
< option
value = "read_only"
data-kt-select-option = '{"desc": "Can only read"}'
selected = ""
>
Read only
</ option >
< option value = "view_only" data-kt-select-option = '{"desc": "Can only view"}' >
View only
</ option >
< option value = "no_access" data-kt-select-option = '{"desc": "No access"}' >
No access
</ option >
</ select >
Modal Integration
Select components inside modal dialogs.
< div >
< button class = "kt-btn" data-kt-modal-toggle = "#modal" >Show Modal</ button >
< div class = "kt-modal" data-kt-modal = "true" id = "modal" >
< div class = "kt-modal-content max-w-[400px] top-[10%]" >
< div class = "kt-modal-header" >
< h3 class = "kt-modal-title" >Modal Title</ h3 >
< button
type = "button"
class = "kt-modal-close"
aria-label = "Close modal"
data-kt-modal-dismiss = "#modal"
>
< svg
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"
class = "lucide lucide-x"
aria-hidden = "true"
>
< path d = "M18 6 6 18" ></ path >
< path d = "m6 6 12 12" ></ path >
</ svg >
</ button >
</ div >
< div class = "kt-modal-body" >
< select
class = "kt-select"
data-kt-select = "true"
data-kt-select-placeholder = "Select a framework..."
data-kt-select-config = '{
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
}'
>
< option value = "react" >React</ option >
< option value = "nextjs" >Next.js</ option >
< option value = "angular" >Angular</ option >
< option value = "vue" >Vue</ option >
< option value = "svelte" >Svelte</ option >
< option value = "ember" >Ember</ option >
< option value = "nuxt" >Nuxt.js</ option >
< option value = "remix" >Remix</ option >
</ select >
</ div >
</ div >
</ div >
</ div >
Template Customization
Advanced template customization for display and options.
< select
class = "kt-select"
data-kt-select = "true"
data-kt-select-placeholder = "Type or select a country..."
data-kt-select-config = '{
"displayTemplate": " < div class=\"flex items-center gap-2\" > {{icon}} < span class=\"font-semibold text-gray-900\" > {{text}} < /span >< /div > ",
"displayClass": "kt-select-display",
"optionTemplate": " < div class=\"flex items-center gap-2\" > {{icon}} < span class=\"text-gray-800\" > {{text}} < /span >< /div > ",
"optionClass": "kt-select-option",
"placeholder": "Select a country...",
"placeholderClass": "kt-select-placeholder",
"placeholderTemplate": " < span class=\"kt-select-placeholder\" > {{placeholder}} < /span > ",
"displaySeparator": ", ",
"tagTemplate": " < span class=\"kt-select-tag\" > {{text}} < /span > "
}'
>
< option
value = "us"
data-kt-select-option = '{"icon": " < img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" / > "}'
>
United States
</ option >
< option
value = "de"
data-kt-select-option = '{"icon": " < img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" / > "}'
>
Germany
</ option >
< option
value = "it"
data-kt-select-option = '{"icon": " < img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" / > "}'
>
Italy
</ option >
< option
value = "fr"
data-kt-select-option = '{"icon": " < img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" / > "}'
>
France
</ option >
< option
value = "es"
data-kt-select-option = '{"icon": " < img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" / > "}'
>
Spain
</ option >
< option
value = "jp"
data-kt-select-option = '{"icon": " < img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" / > "}'
>
Japan
</ option >
< option
value = "ru"
data-kt-select-option = '{"icon": " < img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" / > "}'
>
Russia
</ option >
</ select >
API Reference
Data Attributes
Core Configuration
Attribute Type Default Description data-kt-selectboolean trueInitialize KTSelect on this element. data-kt-select-placeholderstring
Multiple Selection
Attribute Type Default Description data-kt-select-multipleboolean falseEnable multiple selection mode data-kt-select-max-selectionsnumber
Search & Filtering
Attribute Type Default Description data-kt-select-enable-searchboolean falseEnable search functionality within the dropdown data-kt-select-search-placeholderstring
Remote Data
Attribute Type Default Description data-kt-select-remoteboolean falseEnable remote data loading from API data-kt-select-data-urlstring
Dropdown Positioning
Attribute Type Default Description data-kt-select-dropdown-zindexnumber 105Z-index of the dropdown menu data-kt-select-dropdown-containerstring
Advanced Configuration
Attribute Type Default Description data-kt-select-configstring nullJSON configuration object for advanced options (see below) data-kt-select-dispatch-global-eventsboolean
Template Configuration
All advanced options, including templates, classes, and more, are passed via the data-kt-select-config attribute as a flat JSON string.
Template Options
Option Type Default Description optionTemplatestring nullCustom template for dropdown options. displayTemplatestring
Styling Classes
Option Type Default Description optionsClassstring nullAdditional classes for the dropdown options container. optionClassstring
Display Options
Option Type Default Description displaySeparatorstring ", " Separator string for multiple selected values. placeholderstring
Option Type Default Description showSelectedCountboolean trueShow count of selected items in tags mode. enableSelectAllboolean
Search & UX Options
Option Type Default Description searchAutofocusboolean trueAutomatically focus the search input when dropdown opens. closeOnEnterboolean
Dropdown Management Options
Option Type Default Description closeOnOtherOpenboolean trueAutomatically close other open KTSelect dropdowns when this one opens. dispatchGlobalEventsboolean
:
< select
data-kt-select
data-kt-select-placeholder = "Select an option"
data-kt-select-config = '{
"optionTemplate": " < div class=\"custom-option\">{{text}} < /div>",
"displayTemplate": " < div>{{text}} < /div>",
"dropdownTemplate": " < div class=\"custom-dropdown\">{{optionsHtml}} < /div>",
"placeholderTemplate": " < span class=\"custom-placeholder\">{{placeholder}} < /span>",
"searchEmptyTemplate": " < div class=\"no-results\">No results found < /div>",
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]",
"optionClass": "kt-select-option",
"displayClass": "kt-select-display",
"placeholderClass": "kt-select-placeholder",
"displaySeparator": ", ",
"placeholder": "Select a country...",
"searchAutofocus": true,
Option Data
Each <option> can include a data-kt-select-option attribute with a JSON object. Any key in this object is available as a template variable for that option.
:
< select
data-kt-select
data-kt-select-config = '{
"optionTemplate": " < div class=\"custom-option flex items-center gap-2\">{{icon}} < span>{{text}} < /span> < span class=\"ml-2 text-xs text-muted-foreground\">{{description}} < /span> < /div>",
}'
>
< option
value = "1"
data-kt-select-option = '{
"icon": " < img src=\"/avatar.jpg\" class=\"w-8 h-8 rounded-full\" />",
"description": "Administrator account"
}'
>
John Doe
</ option >
</ select >
Events
All events are dispatched on the <select> element and use the unprefixed names. When dispatchGlobalEvents is enabled (default: true), events are also dispatched on the document with namespaced names for global listeners.
Event Payload (event.detail.payload) Description change{ value: string, selected: boolean, selectedOptions: string[] }Triggered when an option's selection state changes. shownullTriggered when the select dropdown is opened.
Event Handling
All custom events are dispatched on the <select> element and use the event name without any prefix:
selectElement. addEventListener ( 'change' , ( event ) => {
const { value , selected , selectedOptions } = event.detail.payload;
// handle change
});
selectElement. addEventListener ( 'show' , () => {
// handle dropdown open
});
selectElement. addEventListener ( 'close' , () => {
// handle dropdown close
});
Global Event Listeners
When dispatchGlobalEvents is enabled (default: true), events are also dispatched on the document with namespaced event names (kt-select:show, kt-select:close, kt-select:change). This enables global event handling and jQuery compatibility.
Native JavaScript:
document. addEventListener ( 'kt-select:show' , ( event ) => {
const { instance , element , payload } = event.detail;
// Handle any KTSelect dropdown opening
console. log ( 'Select opened:' , element);
});
document. addEventListener ( 'kt-select:change' , ( event ) => {
const { payload } = event.detail;
const { value , selected , selectedOptions } = payload;
// Handle any KTSelect change
});
jQuery:
$ (document). on ( 'kt-select:show' , function ( event ) {
const { instance , element , payload } = event.detail;
// Handle any KTSelect dropdown opening
console. log ( 'Select opened:' , element);
});
$ (document). on ( 'kt-select:change' , function ( event ) {
const { payload } = event.detail;
const { value , selected , selectedOptions } = payload;
// Handle any KTSelect change
});
Event Detail Structure:
All global events include the following in event.detail:
instance: Reference to the KTSelect component instance
element: Reference to the native <select> element
payload: Event-specific payload data (same as element events)
Search Autofocus
By default, the search input automatically receives focus when the dropdown opens, allowing immediate keyboard input. This behavior can be disabled:
<!-- Disable autofocus -->
< select
data-kt-select
data-kt-select-enable-search = "true"
data-kt-select-search-autofocus = "false"
>
< option value = "1" >Option 1</ option >
</ select >
Enter Key Behavior
When search is enabled, pressing Enter in the search input selects the first available option and closes the dropdown by default. This behavior can be configured:
<!-- Keep dropdown open after Enter key press -->
< select
data-kt-select
data-kt-select-enable-search = "true"
data-kt-select-close-on-enter = "false"
>
< option value = "1" >Option 1</ option >
< option value = "2" >Option 2</ option >
</ select >
Global Dropdown Management
By default, opening a new KTSelect dropdown automatically closes any other open KTSelect dropdowns on the page. This prevents UI clutter and ensures only one dropdown is open at a time:
<!-- Allow multiple dropdowns to be open simultaneously -->
< select
data-kt-select
data-kt-select-close-on-other-open = "false"
>
< option value = "1" >Option 1</ option >
</ select >
Option Data
Each <option> can include a data-kt-select-option attribute with a JSON object. Any key in this object is available as a template variable for that option.
:
< select
data-kt-select
data-kt-select-config = '{
"optionTemplate": " < div class=\"custom-option flex items-center gap-2\">{{icon}} < span>{{text}} < /span> < span class=\"ml-2 text-xs text-muted-foreground\">{{description}} < /span> < /div>",
}'
>
< option
value = "1"
data-kt-select-option = '{
"icon": " < img src=\"/avatar.jpg\" class=\"w-8 h-8 rounded-full\" />",
"description": "Administrator account"
}'
>
John Doe
</ option >
</ select >