KTUIKTUI
KTUIKTUI
ComponentsDocsStudio

Getting Started

IntroductionInstallationApproachThemingJavaScriptDark modeRTLReferencesChangelog - v1.0.12Metronic TemplatePopular

Components

AccordionAvatarAlertBadgeBreadcrumbButtonCardCheckboxCollapseDatatableDatepickerSoonDismissDrawerDropdownImage InputInputUpdateKbdLinkModalPaginationProgressRadio GroupReparentScrollableScrollspyUpdateScrolltoSelectSeparatorSkeletonStepperStickySwitchTabsTextareaTheme SwitchToastNewTooltipToggleToggle GroupToggle PasswordTooltip
©2025 KtUI. All rights reserved.
A project by Keenthemes
Docs
Advanced Select

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.

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": "&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

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": "&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

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": "&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>

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": "&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>

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": "&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>

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": "&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>

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.

OptionTypeDefaultDescription
data-kt-selectbooleantrueInitialize KTSelect on this element.
data-kt-select-placeholderstring""Custom placeholder text when no option is selected
data-kt-select-multiplebooleanfalseEnable multiple selection mode
data-kt-select-max-selectionsnumbernullMaximum number of selectable options in multiple mode, null for unlimited
data-kt-select-disabledbooleanfalseDisable the entire select component
data-kt-select-enable-searchbooleanfalseEnable search functionality within the dropdown
data-kt-select-search-placeholderstring"Search..."Placeholder text for the search input
data-kt-select-search-emptystring"No results"Text to display when no search results are found
data-kt-select-dropdown-zindexnumber105Z-index of the dropdown menu
data-kt-select-dropdown-containerstringnullContainer element for the dropdown menu
data-kt-select-dropdown-placementstringnullPlacement of the dropdown menu
data-kt-select-configstringnullJSON 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:

OptionTypeDefaultDescription
optionTemplatestringnullCustom template for dropdown options.
displayTemplatestringnullCustom template for the selected value display.
dropdownTemplatestringnullCustom template for the dropdown container.
placeholderTemplatestringnullCustom template for the placeholder.
searchEmptyTemplatestringnullTemplate shown when search returns no results.
optionsClassstringnullAdditional classes for the dropdown options container.
optionClassstringnullAdditional classes for each option.
displayClassstringnullAdditional classes for the display element.
placeholderClassstringnullAdditional classes for the placeholder element.
displaySeparatorstring", "Separator string for multiple selected values.
placeholderstring""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>

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>

Events

All events are dispatched on the <select> element and use the unprefixed names:

EventPayload (event.detail.payload)Description
change{ value: string, selected: boolean, selectedOptions: string[] }Triggered when an option's selection state changes.
shownullTriggered when the select dropdown is opened.
closenullTriggered 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
});
PreviouseScrolltoNextSeparator

On This Page

  • Examples
    • Basic Usage
    • Avatar
    • Country
    • Description
    • Disabled Options
    • Disable Select
    • Icon Multiple
    • Icon
    • Max Selection
    • Modal
    • Multiple
    • Placeholder
    • Search
    • Sizes
  • Component API
    • Options
    • Template Config
    • Option Data
    • Events