Examples
Basic Usage
A simple dropdown select component for single option selection.
< 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 >
Avatar
A select component with avatar images template for each option.
< 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
A select component with country flags template for each option.
< 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
A select component with description template for each option.
< 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 >
Disabled Options
A select component with disabled options.
< 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 >
Disable Select
A select component with disabled state.
< 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 >
Icon Multiple
A select component with multiple icon template for each option.
< 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 >
Icon
A select component with icon template for each option.
< 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 >
Max Selection
A select component with max selection.
< 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 >
Modal
A select component with modal.
< 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 >
Multiple
A select component with multiple selection.
< 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 >
Placeholder
A select component with placeholder.
< 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 >
Search
A select component with search.
< 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 >
Sizes
A select component with sizes.
< 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 >
Component API
Options
These data attributes allow you to configure the select component during initialization.
Option Type Default Description data-kt-select
boolean true
Initialize KTSelect on this element. data-kt-select-placeholder
string ""
Custom placeholder text when no option is selected data-kt-select-multiple
boolean false
Enable multiple selection mode data-kt-select-max-selections
number null
Maximum number of selectable options in multiple mode, null
for unlimited data-kt-select-disabled
boolean false
Disable the entire select component data-kt-select-enable-search
boolean false
Enable search functionality within the dropdown data-kt-select-search-placeholder
string "Search..."
Placeholder text for the search input data-kt-select-search-empty
string "No results"
Text to display when no search results are found data-kt-select-dropdown-zindex
number 105
Z-index of the dropdown menu data-kt-select-dropdown-container
string null
Container element for the dropdown menu data-kt-select-dropdown-placement
string null
Placement of the dropdown menu data-kt-select-config
string null
JSON configuration object for advanced options (see below)
Template Config
All advanced options, including templates, classes, and more, are passed via the data-kt-select-config
attribute as a flat JSON string. Config keys include:
Option Type Default Description optionTemplate
string null
Custom template for dropdown options. displayTemplate
string null
Custom template for the selected value display. dropdownTemplate
string null
Custom template for the dropdown container. placeholderTemplate
string null
Custom template for the placeholder. searchEmptyTemplate
string null
Template shown when search returns no results. optionsClass
string null
Additional classes for the dropdown options container. optionClass
string null
Additional classes for each option. displayClass
string null
Additional classes for the display element. placeholderClass
string null
Additional classes for the placeholder element. displaySeparator
string ", " Separator string for multiple selected values. placeholder
string "" Placeholder text when no option is selected.
Example:
< 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..."
}'
>
< option value = "1" >Option 1</ option >
< option value = "2" >Option 2</ option >
</ select >
Copy
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.
Example:
< 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 >
Copy
Events
All events are dispatched on the <select>
element and use the unprefixed names:
Event Payload (event.detail.payload
) Description change
{ value: string, selected: boolean, selectedOptions: string[] }
Triggered when an option's selection state changes. show
null
Triggered when the select dropdown is opened. close
null
Triggered when the select dropdown is closed.
Listening to Events:
All custom events are dispatched on the <select>
element and use the event name without any prefix. Example:
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
});
Copy