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='{
            "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"
    >
      <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='{
            "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"
  >
    <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"
  >
    <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>

Tags: selected count

In tags mode, set showSelectedCount to true to render a short summary (for example 3 selected) before the tag chips. Override the copy with selectedCountText and the {{count}} placeholder.

<div class="flex max-w-md flex-col gap-8">
  <div>
    <label
      class="block mb-3 font-semibold text-gray-800"
      for="select-tags-count-default"
      >Default label (<!-- -->{{count}} selected<!-- -->)</label
    ><select
      id="select-tags-count-default"
      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="de,fr,it"
      data-kt-select-config='{
            "showSelectedCount": true,
            "optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
          }'
    >
      <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>
    </select>
  </div>
  <div>
    <label
      class="block mb-3 font-semibold text-gray-800"
      for="select-tags-count-custom"
      >Custom label via<!-- -->
      <code class="text-sm font-mono text-primary"
        >selectedCountText</code
      ></label
    ><select
      id="select-tags-count-custom"
      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"
      data-kt-select-config='{
            "showSelectedCount": true,
            "selectedCountText": "{{count}} team members",
            "optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
          }'
    >
      <option value="jenny">Jenny Wilson</option>
      <option value="mike">Mike Johnson</option>
      <option value="david">David Brown</option>
      <option value="sarah">Sarah Davis</option>
    </select>
  </div>
</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

Multiple Selection

Attribute	Type	Default	Description
`data-kt-select-multiple`	boolean	`false`	Enable multiple selection mode
`data-kt-select-max-selections`	number

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

Remote Data

Attribute	Type	Default	Description
`data-kt-select-remote`	boolean	`false`	Enable remote data loading from API
`data-kt-select-data-url`	string

Attribute	Type	Default	Description
`data-kt-select-dropdown-zindex`	number	`105`	Z-index of the dropdown menu
`data-kt-select-dropdown-container`	string

Advanced Configuration

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

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

Styling Classes

Option	Type	Default	Description
`optionsClass`	string	`null`	Additional classes for the dropdown options container.
`optionClass`	string

Display Options

Option	Type	Default	Description
`displaySeparator`	string	", "	Separator string for multiple selected values.
`placeholder`	string

Tags Mode Options

Option	Type	Default	Description
`showSelectedCount`	boolean	`false`	When `true`, show count of selected items before tags in tags mode.
`selectedCountText`	string

Search & UX Options

Option	Type	Default	Description
`searchAutofocus`	boolean	`true`	Automatically focus the search input when dropdown opens.
`closeOnEnter`	boolean

Option	Type	Default	Description
`closeOnOtherOpen`	boolean	`true`	Automatically close other open KTSelect dropdowns when this one opens.
`dispatchGlobalEvents`	boolean

<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

Events are dispatched on the <select> element. When dispatchGlobalEvents is enabled (default: true), events are also dispatched on document in both non-namespaced (show, close, change) and namespaced (kt-select:show, etc.) formats.

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.

Event Handling

Element-level listeners:

selectElement.addEventListener('change', (event) => {
  const { value, selected, selectedOptions } = event.detail.payload;
});
 
selectElement.addEventListener('show', () => {
  // dropdown opened
});

Global listeners (document):

// Native JavaScript - both formats work
document.addEventListener('show', (event) => {
  const { instance, element, payload } = event.detail;
});
 
document.addEventListener('kt-select:show', (event) => {
  const { instance, element, payload } = event.detail;
});
 
// jQuery - both formats work
$(document).on('show', function(event) {
  const { instance, element, payload } =

Event detail structure:

instance: KTSelect component instance
element: Native <select> element
payload: Event-specific data (same as element events)

Programmatic selection

To set the selected value(s) from JavaScript, use the component instance from the original <select> element (the one with data-kt-select):

KTSelect.getInstance(selectElement) — use when the select is already initialized
KTSelect.getOrCreateInstance(selectElement) — get the existing instance or create one

setSelectedOptions() expects an array of native <option> elements (HTMLOptionElement), not plain values. The method updates internal state, the native <select>, the trigger display (and placeholder), and the dropdown option styling automatically. No extra step (such as calling updateSelectedOptionDisplay() or refresh()) is required.

Single select — set by value:

const selectElement = document.querySelector('[data-kt-select]');
const instance = KTSelect.getInstance(selectElement) ?? KTSelect.getOrCreateInstance(selectElement);
const option = selectElement.querySelector('option[value="yourValue"]');
instance.setSelectedOptions(option ? [option] : []);

Multiple select — set several options:

const selectElement = document.querySelector('[data-kt-select]');
const instance = KTSelect.getInstance(selectElement) ?? KTSelect.getOrCreateInstance(selectElement);
const options = ['a', 'b'].map((v) => selectElement.querySelector(`option[value="${v}"]`)).filter(Boolean);
instance.setSelectedOptions(options);

Clear selection:

instance.setSelectedOptions([]);

After calling setSelectedOptions(), the native select, the visible trigger text (or tags), and the checkmarks/selected state in the dropdown stay in sync. For remote or dynamically loaded options, call setSelectedOptions() after options are available in the DOM (or use update() / refresh() as needed).

Reading the current selection

You do not need to listen for kt-select:change just to read the current value. Use the native <select> (after KTSelect has synced) and/or the KTSelect instance on that same element.

KTSelect.getInstance(selectElement) — instance already created (for example after KTSelect.init()).
KTSelect.getOrCreateInstance(selectElement) — safe when initialization order is uncertain.

getSelectedOptions() returns an array of option value strings (from each <option value="...">), not labels and not DOM nodes. For single-select, getValue() returns that one value or null when empty. For multiple-select, getValue() always returns null; use getSelectedOptions() (or native selectedOptions) for all values.

Single select — read value:

const selectElement = document.querySelector('[data-kt-select]');
const instance =
  KTSelect.getInstance(selectElement) ?? KTSelect.getOrCreateInstance(selectElement);
 
const value = instance.getValue(); // string | null
const values = instance.getSelectedOptions(); // string[], length 0 or 1
const native = selectElement.value; // kept in sync for single-select

Multiple select — read all values:

const selectElement = document.querySelector('[data-kt-select]');
const instance =
  KTSelect.getInstance(selectElement) ?? KTSelect.getOrCreateInstance(selectElement);
 
const values = instance.getSelectedOptions();
const fromNative = Array.from(selectElement.selectedOptions).map((o) => o.value);
// instance.getValue() is null in multiple mode by design

Live demo (button logs to the console and shows an alert):

<div class="flex max-w-md flex-col gap-4">
  <select
    id="ktui-select-read-demo"
    class="kt-select"
    data-kt-select="true"
    data-kt-select-placeholder="Pick a stack"
  >
    <option value="react">React</option>
    <option value="vue">Vue</option>
    <option value="svelte">Svelte</option>
  </select>
  <div class="flex flex-wrap items-center gap-2">
    <button
      type="button"
      id="ktui-select-read-demo-btn"
      class="kt-btn kt-btn-outline kt-btn-sm"
    >
      Read selection (console + alert)
    </button>
  </div>
  <p class="text-muted-foreground text-xs">
    Uses
    <code class="text-foreground">window.KTSelect.getInstance</code>,<!-- -->
    <code class="text-foreground">getValue()</code>, and<!-- -->
    <code class="text-foreground">getSelectedOptions()</code> — see the Select
    docs for full patterns.
  </p>
  <script>
    (function () {
      function init() {
        var sel = document.getElementById("ktui-select-read-demo");
        var btn = document.getElementById("ktui-select-read-demo-btn");
        if (!sel || !btn || !window.KTSelect) return;
        if (btn.getAttribute("data-kt-select-read-demo") === "1") return;
        btn.setAttribute("data-kt-select-read-demo", "1");

        btn.addEventListener("click", function () {
          var inst =
            window.KTSelect.getInstance(sel) ||
            window.KTSelect.getOrCreateInstance(sel);
          if (!inst) return;
          var scalar = inst.getValue();
          var all = inst.getSelectedOptions();
          var native = sel.value;
          var msg =
            "getValue(): " +
            JSON.stringify(scalar) +
            "\ngetSelectedOptions(): " +
            JSON.stringify(all) +
            "\nnative select.value: " +
            JSON.stringify(native);
          console.log("[KTSelect read demo]", {
            getValue: scalar,
            getSelectedOptions: all,
            nativeValue: native,
          });
          window.alert(msg);
        });
      }

      function schedule() {
        if (document.readyState === "loading") {
          document.addEventListener("DOMContentLoaded", init);
        } else if (window.KTSelect) {
          setTimeout(init, 0);
        } else {
          window.addEventListener("load", init);
        }
      }
      schedule();
    })();
  </script>
</div>

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>

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>

TypeScript

Import the component and types from @keenthemes/ktui for typed options:

import {
  KTSelect,
  type KTSelectConfigInterface,
  type KTSelectOption,
} from '@keenthemes/ktui';
 
const selectEl = document.querySelector<HTMLSelectElement>('[data-kt-select]');
if (!selectEl) return;
 
const instance = KTSelect.getInstance(selectEl) ?? KTSelect.getOrCreateInstance(selectEl);
const currentValue = instance.getValue(); // string | null (single-select only)
const config: Partial<KTSelectConfigInterface> = {};
const options:

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

Tags: selected count

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

Search & UX Options

Dropdown Management Options

Option Data

Events

Event Handling

Programmatic selection

Reading the current selection

Search Autofocus

Enter Key Behavior

Global Dropdown Management

TypeScript