Docs

Advanced Select

KTSelect is a feature-rich, customizable dropdown component built with modern web standards. It offers single/multiple selection, search, and rich icon support with various styling options.

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": "&lt;span class=\"text-primary\"&gt;{{placeholder}}&lt;/span&gt;"
		}'
>
  <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>

Enhanced Tags

Visual tags for selected items with enhanced functionality.

<div class="flex flex-col gap-8">
  <div>
    <label class="block mb-3 font-semibold text-gray-800" for="select-team"
      >Team Members</label
    ><select
      class="kt-select"
      data-kt-select="true"
      data-kt-select-placeholder="Select team members..."
      data-kt-select-multiple="true"
      data-kt-select-tags="true"
      data-kt-select-pre-selected="jenny,mike,david"
      data-kt-select-config='{
            "showSelectedCount": true,
            "enableSelectAll": true,
            "selectAllText": "Select All",
            "clearAllText": "Clear All"
          }'
    >
      <option value="jenny">Jenny Wilson</option>
      <option value="mike">Mike Johnson</option>
      <option value="david">David Brown</option>
      <option value="sarah">Sarah Davis</option>
      <option value="alex">Alex Thompson</option>
      <option value="lisa">Lisa Anderson</option>
    </select>
  </div>
  <div>
    <label class="block mb-3 font-semibold text-gray-800" for="select-countries"
      >Countries</label
    ><select
      class="kt-select"
      data-kt-select="true"
      data-kt-select-placeholder="Select countries..."
      data-kt-select-multiple="true"
      data-kt-select-tags="true"
      data-kt-select-pre-selected="france,spain"
      data-kt-select-config='{
            "showSelectedCount": true
          }'
    >
      <option value="france">France</option>
      <option value="spain">Spain</option>
      <option value="germany">Germany</option>
      <option value="italy">Italy</option>
      <option value="japan">Japan</option>
      <option value="canada">Canada</option>
    </select>
  </div>
  <div>
    <label class="block mb-3 font-semibold text-gray-800" for="select-skills"
      >Skills</label
    ><select
      class="kt-select"
      data-kt-select="true"
      data-kt-select-placeholder="Select your skills..."
      data-kt-select-multiple="true"
      data-kt-select-tags="true"
      data-kt-select-config='{
            "showSelectedCount": true,
            "enableSelectAll": true
          }'
    >
      <option value="javascript">JavaScript</option>
      <option value="typescript">TypeScript</option>
      <option value="react">React</option>
      <option value="vue">Vue.js</option>
      <option value="angular">Angular</option>
      <option value="node">Node.js</option>
      <option value="python">Python</option>
      <option value="java">Java</option>
    </select>
  </div>
</div>

Tags with Icons

Tags that include icons for each selected option.

<div>
  <label class="block mb-3 font-semibold text-gray-800" for="select-countries"
    >Countries</label
  ><select
    class="kt-select"
    data-kt-select="true"
    data-kt-select-placeholder="Type or select a country..."
    data-kt-select-multiple="true"
    data-kt-select-tags="true"
    data-kt-select-config='{
          "tagTemplate": "{{icon}} {{text}}",
          "optionTemplate": "&lt;div class=\"flex items-center gap-2\"&gt;{{icon}}&lt;span class=\"text-gray-800\"&gt;{{text}}&lt;/span&gt;&lt;/div&gt;",
          "optionClass": "kt-select-option"
        }'
  >
    <option
      value="us"
      data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" /&gt;"}'
    >
      United States
    </option>
    <option
      value="de"
      data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" /&gt;"}'
    >
      Germany
    </option>
    <option
      value="it"
      data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" /&gt;"}'
    >
      Italy
    </option>
    <option
      value="fr"
      data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" /&gt;"}'
    >
      France
    </option>
    <option
      value="es"
      data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" /&gt;"}'
    >
      Spain
    </option>
    <option
      value="jp"
      data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" /&gt;"}'
    >
      Japan
    </option>
    <option
      value="ru"
      data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" /&gt;"}'
    >
      Russia
    </option>
  </select>
</div>

Basic Tags

Simple tags mode for multiple selection.

<div>
  <label class="block mb-3 font-semibold text-gray-800" for="select-countries"
    >Countries</label
  ><select
    class="kt-select"
    data-kt-select="true"
    data-kt-select-placeholder="Select countries..."
    data-kt-select-multiple="true"
    data-kt-select-tags="true"
    data-kt-select-config='{
          "showSelectedCount": true
        }'
  >
    <option value="us">United States</option>
    <option value="de">Germany</option>
    <option value="it">Italy</option>
    <option value="fr">France</option>
    <option value="es">Spain</option>
    <option value="jp">Japan</option>
    <option value="ru">Russia</option>
    <option value="ca">Canada</option>
  </select>
</div>

Pre-selected Tags

Tags with pre-selected values.

<div>
  <label class="block mb-3 font-semibold text-gray-800" for="select-countries"
    >Countries</label
  ><select
    class="kt-select"
    data-kt-select="true"
    data-kt-select-placeholder="Select countries..."
    data-kt-select-pre-selected="de,fr"
    data-kt-select-multiple="true"
    data-kt-select-tags="true"
    data-kt-select-config='{
          "showSelectedCount": true
        }'
  >
    <option value="us">United States</option>
    <option value="de">Germany</option>
    <option value="it">Italy</option>
    <option value="fr">France</option>
    <option value="es">Spain</option>
    <option value="jp">Japan</option>
    <option value="ru">Russia</option>
    <option value="ca">Canada</option>
  </select>
</div>

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": "&lt;div class=\"flex items-center gap-2\"&gt;{{icon}}&lt;span class=\"text-foreground\"&gt;{{text}}&lt;/span&gt;&lt;/div&gt;",
			"optionTemplate": "&lt;div class=\"flex items-center gap-2\"&gt;{{icon}} &lt;span class=\"text-foreground\"&gt;{{text}}&lt;/span&gt;&lt;/div&gt;&lt;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\"&gt;&lt;path d=\"M20 6 9 17l-5-5\"/&gt;&lt;/svg&gt;&lt;/div&gt;"
		}'
>
  <option
    value="hardwere"
    data-kt-select-option='{"icon": "&lt;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\"&gt;&lt;circle cx=\"19\" cy=\"6\" r=\"3\"/&gt;&lt;path d=\"M22 12v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9\/&gt;&lt;path d=\"M12 17v4\/&gt;&lt;path d=\"M8 21h8\"/&gt;&lt;/svg&gt;"}'
  >
    Hardwere
  </option>
  <option
    value="software"
    data-kt-select-option='{"icon": "&lt;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\"&gt;&lt;path d=\"M10 10.5 8 13l2 2.5\/&gt;&lt;path d=\"m14 10.5 2 2.5-2 2.5\/&gt;&lt;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\"/&gt;&lt;/svg&gt;"}'
  >
    Software
  </option>
  <option
    value="network"
    data-kt-select-option='{"icon": "&lt;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\"&gt;&lt;rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/&gt;&lt;rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/&gt;&lt;rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\"/&gt;&lt;path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\/&gt;&lt;path d=\"M12 12V8\/&gt;&lt;/svg&gt;"}'
  >
    Network
  </option>
  <option
    value="storage"
    data-kt-select-option='{"icon": "&lt;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\"&gt;&lt;ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"/&gt;&lt;path d=\"M3 5V19A9 3 0 0 0 21 19V5\/&gt;&lt;path d=\"M3 12A9 3 0 0 0 21 12\"/&gt;&lt;/svg&gt;"}'
  >
    Storage
  </option>
  <option
    value="security"
    data-kt-select-option='{"icon": "&lt;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\"&gt;&lt;circle cx=\"12\" cy=\"16\" r=\"1\"/&gt;&lt;rect x=\"3\" y=\"10\" width=\"18\" height=\"12\" rx=\"2\"/&gt;&lt;path d=\"M7 10V7a5 5 0 0 1 10 0v3\"/&gt;&lt;/svg&gt;"}'
  >
    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": "&lt;div class=\"flex items-center gap-2 [&amp;&gt;svg]:size-3.5\"&gt;{{icon}}&lt;span class=\"text-foreground\"&gt;{{text}}&lt;/span&gt;&lt;/div&gt;",
			"optionTemplate": "&lt;div class=\"flex items-center gap-2\"&gt;{{icon}} &lt;span class=\"text-foreground\"&gt;{{text}}&lt;/span&gt;&lt;/div&gt;&lt;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\"&gt;&lt;path d=\"M20 6 9 17l-5-5\"/&gt;&lt;/svg&gt;&lt;/div&gt;"
		}'
>
  <option
    value="hardwere"
    data-kt-select-option='{"icon": "&lt;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\"&gt;&lt;circle cx=\"19\" cy=\"6\" r=\"3\"/&gt;&lt;path d=\"M22 12v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9\/&gt;&lt;path d=\"M12 17v4\/&gt;&lt;path d=\"M8 21h8\"/&gt;&lt;/svg&gt;"}'
  >
    Hardwere
  </option>
  <option
    value="software"
    data-kt-select-option='{"icon": "&lt;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\"&gt;&lt;path d=\"M10 10.5 8 13l2 2.5\/&gt;&lt;path d=\"m14 10.5 2 2.5-2 2.5\/&gt;&lt;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\"/&gt;&lt;/svg&gt;"}'
  >
    Software
  </option>
  <option
    value="network"
    data-kt-select-option='{"icon": "&lt;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\"&gt;&lt;rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/&gt;&lt;rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/&gt;&lt;rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\"/&gt;&lt;path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\/&gt;&lt;path d=\"M12 12V8\/&gt;&lt;/svg&gt;"}'
  >
    Network
  </option>
  <option
    value="storage"
    data-kt-select-option='{"icon": "&lt;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\"&gt;&lt;ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"/&gt;&lt;path d=\"M3 5V19A9 3 0 0 0 21 19V5\/&gt;&lt;path d=\"M3 12A9 3 0 0 0 21 12\"/&gt;&lt;/svg&gt;"}'
  >
    Storage
  </option>
  <option
    value="security"
    data-kt-select-option='{"icon": "&lt;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\"&gt;&lt;circle cx=\"12\" cy=\"16\" r=\"1\"/&gt;&lt;rect x=\"3\" y=\"10\" width=\"18\" height=\"12\" rx=\"2\"/&gt;&lt;path d=\"M7 10V7a5 5 0 0 1 10 0v3\"/&gt;&lt;/svg&gt;"}'
  >
    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": "&lt;div class=\"flex items-center gap-2\"&gt;&lt;img src=\"{{avatar}}\" alt=\"{{text}}\" class=\"size-5 border border-input rounded-full\" /&gt; &lt;span class=\"text-foreground\"&gt;{{text}}&lt;/span&gt;&lt;/div&gt;",
			"optionTemplate": "&lt;div class=\"flex items-center gap-2\"&gt;&lt;img src=\"{{avatar}}\" alt=\"{{text}}\" class=\"size-6 border border-input rounded-full\" /&gt; &lt;span class=\"text-foreground\"&gt;{{text}}&lt;/span&gt;&lt;/div&gt;&lt;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\"&gt;&lt;path d=\"M20 6 9 17l-5-5\"/&gt;&lt;/svg&gt;",
			"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": "&lt;div class=\"flex items-center leading-none gap-2\"&gt;{{flag}}&lt;span class=\"text-foreground\"&gt;{{text}}&lt;/span&gt;&lt;/div&gt;",
			"optionTemplate": "&lt;div class=\"flex items-center leading-none gap-2\"&gt;{{flag}} &lt;span class=\"text-foreground\"&gt;{{text}}&lt;/span&gt;&lt;/div&gt;&lt;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\"&gt;&lt;path d=\"M20 6 9 17l-5-5\"/&gt;&lt;/svg&gt;&lt;/div&gt;"
		}'
>
  <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": "&lt;div class=\"flex items-center grow gap-2\"&gt;&lt;div class=\"flex flex-col gap-0.5\"&gt;&lt;span class=\"font-semibold text-foreground\"&gt;{{text}}&lt;/span&gt;&lt;span class=\"text-xs text-muted-foreground\"&gt;{{desc}}&lt;/span&gt;&lt;/div&gt;&lt;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\"&gt;&lt;path d=\"M20 6 9 17l-5-5\"/&gt;&lt;/svg&gt;&lt;/div&gt;"
		}'
>
  <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>

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": "&lt;div class=\"flex items-center gap-2\"&gt;{{icon}}&lt;span class=\"font-semibold text-gray-900\"&gt;{{text}}&lt;/span&gt;&lt;/div&gt;",
        "displayClass": "kt-select-display",
        "optionTemplate": "&lt;div class=\"flex items-center gap-2\"&gt;{{icon}}&lt;span class=\"text-gray-800\"&gt;{{text}}&lt;/span&gt;&lt;/div&gt;",
        "optionClass": "kt-select-option",
        "placeholder": "Select a country...",
        "placeholderClass": "kt-select-placeholder",
        "placeholderTemplate": "&lt;span class=\"kt-select-placeholder\"&gt;{{placeholder}}&lt;/span&gt;",
        "displaySeparator": ", ",
        "tagTemplate": "&lt;span class=\"kt-select-tag\"&gt;{{text}}&lt;/span&gt;"
      }'
>
  <option
    value="us"
    data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" /&gt;"}'
  >
    United States
  </option>
  <option
    value="de"
    data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" /&gt;"}'
  >
    Germany
  </option>
  <option
    value="it"
    data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" /&gt;"}'
  >
    Italy
  </option>
  <option
    value="fr"
    data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" /&gt;"}'
  >
    France
  </option>
  <option
    value="es"
    data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" /&gt;"}'
  >
    Spain
  </option>
  <option
    value="jp"
    data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" /&gt;"}'
  >
    Japan
  </option>
  <option
    value="ru"
    data-kt-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" /&gt;"}'
  >
    Russia
  </option>
</select>

API Reference

Data Attributes

Core Configuration

Attribute	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-disabled`	boolean	`false`	Disable the entire select component

Multiple Selection

Attribute	Type	Default	Description
`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-tags`	boolean	`false`	Enable tags mode for multiple selection
`data-kt-select-pre-selected`	string	`null`	Comma-separated list of pre-selected values

Search & Filtering

Attribute	Type	Default	Description
`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-search-param`	string	`"q"`	Parameter name for search queries
`data-kt-select-search-min-length`	number	`1`	Minimum characters required to trigger search
`data-kt-select-search-debounce`	number	`300`	Debounce delay for search input (milliseconds)

Remote Data

Attribute	Type	Default	Description
`data-kt-select-remote`	boolean	`false`	Enable remote data loading from API
`data-kt-select-data-url`	string	`null`	URL endpoint for remote data
`data-kt-select-data-field-value`	string	`"value"`	Field name for option value in remote data
`data-kt-select-data-field-text`	string	`"text"`	Field name for option text in remote data

Attribute	Type	Default	Description
`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

Advanced Configuration

Attribute	Type	Default	Description
`data-kt-select-config`	string	`null`	JSON configuration object for advanced options (see below)

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
`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.
`tagTemplate`	string	`null`	Custom template for tags in tags mode.

Styling Classes

Option	Type	Default	Description
`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.

Display Options

Option	Type	Default	Description
`displaySeparator`	string	", "	Separator string for multiple selected values.
`placeholder`	string	""	Placeholder text when no option is selected.

Tags Mode Options

Option	Type	Default	Description
`showSelectedCount`	boolean	`false`	Show count of selected items in tags mode.
`enableSelectAll`	boolean	`false`	Enable select all functionality in tags mode.
`selectAllText`	string	`"Select All"`	Text for select all button.
`clearAllText`	string	`"Clear All"`	Text for clear all button.

<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>

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:

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.

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
});

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>

PreviouseScrollto NextSeparator

Advanced Select

Features

Basic Usage

Placeholder Text

Disabled Select

Disabled Option

Size Variants

Multiple Selection

Maximum Selection

Enhanced Tags

Tags with Icons

Basic Tags

Pre-selected Tags

Search & Filtering

Search

Remote Data

Icons

Multiple Icons

Avatar

Country Selection

Description

Modal Integration

Template Customization

API Reference

Data Attributes

Core Configuration

Multiple Selection

Search & Filtering

Remote Data

Dropdown Positioning

Advanced Configuration

Template Configuration

Template Options

Styling Classes

Display Options

Tags Mode Options

Option Data

Events

Event Handling

Option Data