Advanced Select

Docs

Advanced Select

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

Examples

Basic Usage

A simple dropdown select component for single option selection.

<select
  class="kt-select w-56"
  data-kt-select="true"
  data-kt-select-placeholder="Select a field type..."
>
  <option value="name">Name</option>
  <option value="email">Email Address</option>
  <option value="phone">Phone Number</option>
  <option value="address">Physical Address</option>
  <option value="username">Username</option>
  <option value="password">Password</option>
  <option value="company">Company Name</option>
  <option value="website">Website URL</option>
</select>

Combobox

Combobox mode provides typeahead functionality with dropdown suggestions, allowing users to either select from existing options or type custom values.

<select
  data-kt-select="true"
  data-kt-select-mode="combobox"
  data-kt-select-enable-search="true"
>
  <option value="name">Name</option>
  <option value="email">Email Address</option>
  <option value="phone">Phone Number</option>
  <option value="address">Physical Address</option>
  <option value="username">Username</option>
  <option value="password">Password</option>
  <option value="birthday">Date of Birth</option>
  <option value="gender">Gender</option>
  <option value="country">Country</option>
  <option value="city">City</option>
  <option value="language">Language</option>
  <option value="timezone">Timezone</option>
  <option value="avatar">Profile Picture</option>
  <option value="bio">Biography</option>
  <option value="company">Company</option>
  <option value="position">Job Position</option>
  <option value="department">Department</option>
</select>

Description

Enhance select options with descriptions to provide additional details about each option.

<select
  data-kt-select="true"
  data-kt-select-placeholder="Select with description..."
>
  <option
    value="name"
    data-kt-select-option-description="User&#x27;s full name"
  >
    Name
  </option>
  <option
    value="email"
    data-kt-select-option-description="User&#x27;s email address"
  >
    Email
  </option>
  <option
    value="phone"
    data-kt-select-option-description="User&#x27;s contact number"
  >
    Phone Number
  </option>
  <option
    value="address"
    data-kt-select-option-description="User&#x27;s physical address"
  >
    Address
  </option>
  <option
    value="username"
    data-kt-select-option-description="User&#x27;s login identifier"
  >
    Username
  </option>
  <option
    value="password"
    data-kt-select-option-description="User&#x27;s secure password"
  >
    Password
  </option>
</select>

Disable Option

Individual options can be disabled while keeping the select itself functional. Disabled options cannot be selected or clicked.

<select
  data-kt-select="true"
  data-kt-select-placeholder="Select an available field..."
>
  <option value="name" disabled="">Name (Disabled)</option>
  <option value="email" disabled="">Email Address (Disabled)</option>
  <option value="phone">Phone Number</option>
  <option value="address">Physical Address</option>
  <option value="username">Username</option>
  <option value="password" disabled="">Password (Disabled)</option>
  <option value="company">Company Name</option>
  <option value="website">Website URL</option>
</select>

Disable Select

Completely disable the select component to prevent any user interaction.

<select
  data-kt-select="true"
  data-kt-select-disabled="true"
  data-kt-select-placeholder="This select component is disabled"
>
  <option value="name">Name</option>
  <option value="email">Email Address</option>
  <option value="phone">Phone Number</option>
  <option value="address">Physical Address</option>
</select>

Icon

Enhance select options with icons to provide visual context. This example shows country selection with flag icons.

<select data-kt-select="true">
  <option value="">Select a country...</option>
  <option
    value="usa"
    data-kt-select-option-icon="https://flagcdn.com/w40/us.png"
  >
    United States
  </option>
  <option
    value="germany"
    data-kt-select-option-icon="https://flagcdn.com/w40/de.png"
  >
    Germany
  </option>
  <option
    value="italy"
    data-kt-select-option-icon="https://flagcdn.com/w40/it.png"
  >
    Italy
  </option>
  <option
    value="france"
    data-kt-select-option-icon="https://flagcdn.com/w40/fr.png"
  >
    France
  </option>
  <option
    value="spain"
    data-kt-select-option-icon="https://flagcdn.com/w40/es.png"
  >
    Spain
  </option>
  <option
    value="japan"
    data-kt-select-option-icon="https://flagcdn.com/w40/jp.png"
  >
    Japan
  </option>
</select>

Icon with Descriptions

Combine icons with descriptive text to provide additional details about each option. This example shows programming languages with descriptions.

<select data-kt-select="true">
  <option value="">Select a programming language...</option>
  <option
    value="js"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg"
    data-kt-select-option-description="A high-level, interpreted programming language"
  >
    JavaScript
  </option>
  <option
    value="ts"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg"
    data-kt-select-option-description="A strongly typed programming language that builds on JavaScript"
  >
    TypeScript
  </option>
  <option
    value="python"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg"
    data-kt-select-option-description="A high-level, general-purpose programming language"
  >
    Python
  </option>
  <option
    value="java"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg"
    data-kt-select-option-description="A high-level, class-based, object-oriented programming language"
  >
    Java
  </option>
  <option
    value="go"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg"
    data-kt-select-option-description="A statically typed, compiled programming language"
  >
    Go
  </option>
</select>

Combobox with Icons

Add icons to combobox mode for a richer typeahead experience. This example shows database technologies with their logos.

<select
  data-kt-select="true"
  data-kt-select-mode="combobox"
  data-kt-select-placeholder="Type or select a database..."
>
  <option
    value="mysql"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg"
  >
    MySQL
  </option>
  <option
    value="postgres"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg"
  >
    PostgreSQL
  </option>
  <option
    value="mongodb"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg"
  >
    MongoDB
  </option>
  <option
    value="redis"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg"
  >
    Redis
  </option>
  <option
    value="sqlite"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/sqlite/sqlite-original.svg"
  >
    SQLite
  </option>
</select>

Multiple Selection with Icons

Select multiple options with icons in standard dropdown mode. This example shows technology frameworks with their logos.

<select data-kt-select="true" data-kt-select-multiple="true">
  <option value="">Select technologies...</option>
  <option
    value="react"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg"
  >
    React
  </option>
  <option
    value="vue"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg"
  >
    Vue.js
  </option>
  <option
    value="angular"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg"
  >
    Angular
  </option>
  <option
    value="svelte"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/svelte/svelte-original.svg"
  >
    Svelte
  </option>
  <option
    value="node"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg"
  >
    Node.js
  </option>
</select>

Icon (Multiple)

Tag-style multiple selection with icons. Perfect for creating visually rich multi-select interfaces.

<select
  data-kt-select="true"
  data-kt-select-multiple="true"
  data-kt-select-mode="tags"
>
  <option value="">Select countries...</option>
  <option
    value="usa"
    data-kt-select-option-icon="https://flagcdn.com/w40/us.png"
  >
    United States
  </option>
  <option
    value="germany"
    data-kt-select-option-icon="https://flagcdn.com/w40/de.png"
  >
    Germany
  </option>
  <option
    value="italy"
    data-kt-select-option-icon="https://flagcdn.com/w40/it.png"
  >
    Italy
  </option>
  <option
    value="france"
    data-kt-select-option-icon="https://flagcdn.com/w40/fr.png"
  >
    France
  </option>
  <option
    value="spain"
    data-kt-select-option-icon="https://flagcdn.com/w40/es.png"
  >
    Spain
  </option>
  <option
    value="japan"
    data-kt-select-option-icon="https://flagcdn.com/w40/jp.png"
  >
    Japan
  </option>
</select>

Tags with Icons

Display selected items as removable tags with icons, ideal for categories or filtering interfaces.

<select
  data-kt-select="true"
  data-kt-select-multiple="true"
  data-kt-select-mode="tags"
>
  <option value="">Select technologies...</option>
  <option
    value="react"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg"
  >
    React
  </option>
  <option
    value="vue"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg"
  >
    Vue.js
  </option>
  <option
    value="angular"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg"
  >
    Angular
  </option>
  <option
    value="svelte"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/svelte/svelte-original.svg"
  >
    Svelte
  </option>
  <option
    value="node"
    data-kt-select-option-icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg"
  >
    Node.js
  </option>
</select>

Items

Populate select options programmatically using JavaScript, enabling dynamic option generation from any data source.

<select
  data-kt-select="true"
  data-kt-select-placeholder="Options loaded programmatically"
></select>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Get the select element
    const selectElement = document.querySelector("[data-kt-select]");

    if (selectElement) {
      // Sample data
      const items = [
        { id: "item1", title: "Option 1" },
        { id: "item2", title: "Option 2" },
        { id: "item3", title: "Option 3" },
        { id: "item4", title: "Option 4" },
        { id: "item5", title: "Option 5" },
      ];

      // Create and append option elements
      items.forEach((item) => {
        const option = document.createElement("option");
        option.value = item.id;
        option.textContent = item.title;
        selectElement.appendChild(option);
      });
    }
  });
</script>

Max Selection

Limit the number of selectable options in multiple selection mode, useful for resource allocation or quota interfaces.

<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="">Select up to 3 options...</option>
  <option value="name">Name</option>
  <option value="email">Email Address</option>
  <option value="phone">Phone Number</option>
  <option value="address">Physical Address</option>
  <option value="username">Username</option>
  <option value="password">Password</option>
  <option value="company">Company Name</option>
  <option value="website">Website URL</option>
</select>

Multiple

Enable users to select multiple options from a dropdown list with a simple, clean interface.

<select
  data-kt-select="true"
  data-kt-select-multiple="true"
  data-kt-select-placeholder="Select multiple fields..."
>
  <option value="">Select one or more fields...</option>
  <option value="name">Name</option>
  <option value="email">Email Address</option>
  <option value="phone">Phone Number</option>
  <option value="address">Physical Address</option>
  <option value="username">Username</option>
  <option value="password">Password</option>
  <option value="company">Company Name</option>
  <option value="website">Website URL</option>
</select>

Placeholder

Display a custom placeholder text when no option is selected to provide context and guidance.

<select
  data-kt-select="true"
  data-kt-select-placeholder="Please select a field type..."
>
  <option value="name">Name</option>
  <option value="email">Email Address</option>
  <option value="phone">Phone Number</option>
  <option value="address">Physical Address</option>
  <option value="username">Username</option>
  <option value="password">Password</option>
  <option value="company">Company Name</option>
  <option value="website">Website URL</option>
</select>

Remote Data

Load options dynamically from a remote API endpoint, perfect for large datasets or real-time data.

<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"
></select>

Remote Data (Advanced)

Use advanced field mapping to transform complex API responses into properly formatted select options.

<select
  data-kt-select="true"
  data-kt-select-remote="true"
  data-kt-select-data-url="https://dummyjson.com/products"
  data-kt-select-api-data-property="products"
  data-kt-select-data-field-value="id"
  data-kt-select-data-field-text="title"
  data-kt-select-data-field-description="description"
  data-kt-select-data-field-icon="thumbnail"
  data-kt-select-data-field-icon-height="40px"
  data-kt-select-data-field-icon-width="40px"
  data-kt-select-enable-search="true"
  data-kt-select-templates='{"icon":"&lt;span class=\"option-icon mr-2\"&gt;&lt;img src=\"{{icon}}\" class=\"rounded-full w-6 h-6\" /&gt;&lt;/span&gt;","description":"&lt;div class=\"option-description text-sm text-gray-500\"&gt;{{description}}&lt;/div&gt;"}'
>
  <option value="">Select a product...</option>
</select>

Remote Data with Country Flags

Load country data dynamically with flag icons and capital city descriptions from the REST Countries API.

<select
  data-kt-select="true"
  data-kt-select-remote="true"
  data-kt-select-data-url="https://restcountries.com/v3.1/all"
  data-kt-select-data-field-value="cca3"
  data-kt-select-data-field-text="name.common"
  data-kt-select-data-field-description="capital"
  data-kt-select-data-field-icon="flags.png"
  data-kt-select-data-field-icon-height="24px"
  data-kt-select-data-field-icon-width="36px"
  data-kt-select-enable-search="true"
>
  <option value="">Select a country...</option>
</select>

Remote Data with User Profiles

Fetch user profiles with thumbnails and contact information from a remote API. Demonstrates complex field mapping.

<select
  data-kt-select="true"
  data-kt-select-remote="true"
  data-kt-select-data-url="https://randomuser.me/api/?results=20"
  data-kt-select-api-data-property="results"
  data-kt-select-data-field-value="login.uuid"
  data-kt-select-data-field-text="name.first"
  data-kt-select-data-field-description="email"
  data-kt-select-data-field-icon="picture.thumbnail"
  data-kt-select-data-field-icon-height="42px"
  data-kt-select-data-field-icon-width="42px"
  data-kt-select-enable-search="true"
>
  <option value="">Select a user...</option>
</select>

Remote Data (Tags)

Combine remote data with tag-style selection for a dynamic, user-friendly interface.

<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-multiple="true"
  data-kt-select-mode="tags"
>
  <option value="">Loading users...</option>
</select>

Remote Data (Advanced - Tags)

Advanced remote data integration with tags mode and custom field mapping.

<select
  data-kt-select="true"
  data-kt-select-remote="true"
  data-kt-select-data-url="https://dummyjson.com/products"
  data-kt-select-api-data-property="products"
  data-kt-select-data-field-value="id"
  data-kt-select-data-field-text="title"
  data-kt-select-data-field-description="description"
  data-kt-select-data-field-icon="thumbnail"
  data-kt-select-data-field-icon-height="40px"
  data-kt-select-data-field-icon-width="40px"
  data-kt-select-multiple="true"
  data-kt-select-enable-search="true"
  data-kt-select-mode="tags"
>
  <option value="">products...</option>
</select>

Search

Filter options as you type with built-in search functionality, ideal for dropdowns with many options.

<select
  data-kt-select="true"
  data-kt-select-enable-search="true"
  data-kt-select-placeholder="Search for a field..."
>
  <option value="">Search for a field...</option>
  <option value="name">Name</option>
  <option value="email">Email Address</option>
  <option value="phone">Phone Number</option>
  <option value="address">Physical Address</option>
  <option value="username">Username</option>
  <option value="password">Password</option>
  <option value="birthday">Date of Birth</option>
  <option value="gender">Gender</option>
  <option value="country">Country</option>
  <option value="city">City</option>
  <option value="language">Language</option>
  <option value="timezone">Timezone</option>
  <option value="avatar">Profile Picture</option>
  <option value="biography">Biography</option>
  <option value="company">Company Name</option>
  <option value="department">Department</option>
  <option value="position">Job Title</option>
  <option value="skills">Skills</option>
</select>

Tags (Selected)

Preselect specific options in tags mode to create an interface with default selections.

<select
  data-kt-select="true"
  data-kt-select-multiple="true"
  data-kt-select-mode="tags"
  data-kt-select-placeholder="Select countries..."
  data-kt-select-pre-selected="italy,france"
>
  <option value="">Select countries...</option>
  <option
    value="usa"
    data-kt-select-option-icon="https://flagcdn.com/w40/us.png"
  >
    United States
  </option>
  <option
    value="germany"
    data-kt-select-option-icon="https://flagcdn.com/w40/de.png"
  >
    Germany
  </option>
  <option
    value="italy"
    data-kt-select-option-icon="https://flagcdn.com/w40/it.png"
  >
    Italy
  </option>
  <option
    value="france"
    data-kt-select-option-icon="https://flagcdn.com/w40/fr.png"
  >
    France
  </option>
  <option
    value="spain"
    data-kt-select-option-icon="https://flagcdn.com/w40/es.png"
  >
    Spain
  </option>
  <option
    value="japan"
    data-kt-select-option-icon="https://flagcdn.com/w40/jp.png"
  >
    Japan
  </option>
</select>

Select components can be seamlessly integrated within modal dialogs, providing a clean UI for forms and configuration panels. This example demonstrates a select with search functionality inside a modal dialog with proper z-index handling and focus management.

<div class="flex items-center justify-center py-4 sm:py-16">
  <button class="kt-btn" data-kt-modal-toggle="#select-modal">
    Open Modal with Select
  </button>
  <div
    class="hidden fixed inset-0 overflow-auto p-4"
    data-kt-modal="true"
    id="select-modal"
  >
    <div
      class="relative flex flex-col mx-auto rounded-lg shadow-md bg-white dark:bg-neutral-800 max-w-md top-[5%]"
    >
      <div
        class="flex items-center justify-between gap-2 px-5 py-4 border-b border-b-gray-200 dark:border-b-neutral-800"
      >
        <h3 class="text-base font-semibold text-gray-900 dark:text-neutral-100">
          Select Inside Modal
        </h3>
        <button
          class="cursor-pointer inline-flex items-center font-medium focus:outline-none transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-200 dark:focus-visible:ring-neutral-700 focus-visible:ring-offset-2 hover:text-gray-700 dark:hover:text-neutral-600 dark:bg-neutral-700 gap-1 bg-transparent dark:hover:bg-neutral-800/20 rounded-md w-6 h-6 p-0 text-sm justify-center text-gray-600 hover:bg-gray-600/10 dark:text-neutral-300"
          aria-label="Close modal"
          data-kt-modal-dismiss="#select-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 size-3.5"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div
        class="kt-scroll-area overflow-y-auto px-5 py-4 text-sm text-gray-600 dark:text-neutral-300"
      >
        <div class="space-y-4">
          <label class="block text-sm font-medium">Choose a field type:</label
          ><select
            data-kt-select="true"
            data-kt-select-search="true"
            data-kt-select-placeholder="Select a field type..."
          >
            <option value="name">Name</option>
            <option value="email">Email Address</option>
            <option value="phone">Phone Number</option>
            <option value="address">Physical Address</option>
            <option value="username">Username</option>
            <option value="password">Password</option>
            <option value="company">Company Name</option>
            <option value="website">Website URL</option>
            <option value="description">Description</option>
            <option value="birthday">Date of Birth</option>
            <option value="country">Country</option>
            <option value="state">State/Province</option>
            <option value="zipcode">Zip/Postal Code</option>
          </select>
        </div>
      </div>
      <div
        class="flex items-center justify-between gap-2 px-5 py-4 border-t border-t-gray-200 dark:border-t-neutral-800"
      >
        <div></div>
        <div class="flex gap-4">
          <button
            class="cursor-pointer inline-flex items-center justify-center font-medium focus:outline-none transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-200 dark:focus-visible:ring-neutral-700 focus-visible:ring-offset-2 bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-700 dark:text-neutral-200 dark:hover:text-neutral-600 dark:bg-neutral-700 dark:hover:bg-neutral-700 h-10 px-3.5 py-2 text-sm gap-1.5 rounded-md"
            data-kt-modal-dismiss="#select-modal"
          >
            Cancel</button
          ><button class="kt-btn">Apply</button>
        </div>
      </div>
    </div>
  </div>
</div>

Template Customization

Customize the appearance of options and tags using templates.

<select
  data-kt-select="true"
  data-kt-select-placeholder="Select a user..."
  data-kt-select-enable-search="true"
  data-kt-select-templates='{"option":"&lt;li data-kt-select-option data-value=\"{{value}}\" class=\"px-3 py-2 cursor-pointer hover:bg-gray-100 flex items-center{{selectedClass}}{{disabledClass}}\" role=\"option\" {{selected}} {{disabled}}&gt;{{icon}}&lt;div class=\"option-content\"&gt;&lt;div class=\"option-title\"&gt;{{text}}&lt;/div&gt;{{description}}&lt;/div&gt;&lt;/li&gt;","icon":"&lt;span class=\"option-icon mr-2\"&gt;&lt;img src=\"{{icon}}\" class=\"rounded-full w-6 h-6\" /&gt;&lt;/span&gt;","description":"&lt;div class=\"option-description text-sm text-gray-500\"&gt;{{description}}&lt;/div&gt;","tag":"&lt;div data-kt-select-tag class=\"inline-flex items-center bg-blue-50 border border-blue-100 rounded px-2 py-1 text-sm mr-1 mb-1\"&gt;&lt;span&gt;{{title}}&lt;/span&gt;&lt;span data-kt-select-remove-button data-value=\"{{id}}\" class=\"ml-1 text-blue-400 hover:text-blue-600 cursor-pointer\" role=\"button\" aria-label=\"Remove {{safeTitle}}\" tabindex=\"0\"&gt;&lt;svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"&gt;&lt;line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"&gt;&lt;/line&gt;&lt;line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/div&gt;","search":"&lt;div class=\"px-3 py-2 border-b border-gray-200\"&gt;&lt;input type=\"text\" data-kt-select-search placeholder=\"{{searchPlaceholder}}\" class=\"w-full border-none focus:outline-none text-sm\" role=\"searchbox\" aria-label=\"{{searchPlaceholder}}\"/&gt;&lt;/div&gt;","noResults":"&lt;li class=\"px-3 py-2 text-gray-500\" role=\"status\"&gt;{{searchNotFoundText}}&lt;/li&gt;","loading":"&lt;li class=\"px-3 py-2 text-gray-500 italic\" role=\"status\" aria-live=\"polite\"&gt;{{loadingMessage}}&lt;/li&gt;","error":"&lt;li class=\"px-3 py-2 text-red-500\" role=\"alert\"&gt;{{errorMessage}}&lt;/li&gt;","display":"&lt;div data-kt-select-display class=\"flex items-center justify-between px-3 py-2 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-400\" tabindex=\"{{tabindex}}\" role=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-label=\"{{label}}\" {{disabled}}&gt;&lt;span data-kt-select-value&gt;{{placeholder}}&lt;/span&gt;&lt;span data-kt-select-arrow class=\"ml-2\"&gt;&lt;svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"&gt;&lt;polyline points=\"6 9 12 15 18 9\"&gt;&lt;/polyline&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/div&gt;","dropdown":"&lt;div class=\"absolute mt-1 w-full rounded-lg shadow-lg bg-white z-10 overflow-hidden border border-gray-200\" data-select-dropdown&gt;&lt;ul data-kt-select-options-container&gt;&lt;/ul&gt;&lt;/div&gt;","optionGroup":"&lt;li role=\"group\" aria-label=\"{{label}}\" class=\"py-1\"&gt;&lt;div class=\"px-3 py-1 text-xs font-semibold text-gray-500 uppercase\"&gt;{{label}}&lt;/div&gt;&lt;ul&gt;{{optionsHtml}}&lt;/ul&gt;&lt;/li&gt;"}'
  data-kt-select-focus-class="option-focused assdf"
  data-kt-select-hover-class="hovered"
  data-kt-select-bg-class="bg-green-50"
  data-kt-select-font-class="font-bold"
>
  <option
    value="1"
    data-kt-select-option='{"icon": "/media/avatars/300-1.png", "description": "Frontend Developer"}'
  >
    John Doe
  </option>
  <option
    value="2"
    data-kt-select-option='{"icon": "/media/avatars/300-2.png", "description": "UI/UX Designer"}'
  >
    Jane Smith
  </option>
  <option
    value="3"
    data-kt-select-option='{"icon": "/media/avatars/300-3.png", "description": "Backend Engineer"}'
  >
    Alex Lee
  </option>
  <option
    value="4"
    data-kt-select-option='{"icon": "/media/avatars/300-4.png", "description": "Project Manager"}'
  >
    Maria Garcia
  </option>
  <option
    value="5"
    data-kt-select-option='{"icon": "/media/avatars/300-5.png", "description": "QA Specialist"}'
  >
    Chris Kim
  </option>
  <option
    value="6"
    data-kt-select-option='{"icon": "/media/avatars/300-6.png", "description": "DevOps Engineer"}'
  >
    Patricia Chen
  </option>
  <option
    value="7"
    data-kt-select-option='{"icon": "/media/avatars/300-7.png", "description": "Support Lead"}'
  >
    Michael Brown
  </option>
  <option
    value="8"
    data-kt-select-option='{"icon": "/media/avatars/300-8.png", "description": "Marketing Director"}'
  >
    Lisa Wang
  </option>
</select>

Component API

Options

These data attributes allow you to configure the select component during initialization.

Option	Type	Default	Description
`data-kt-select-multiple`	boolean	`false`	Enable multiple selection mode
`data-kt-select-mode`	string	`""`	Select mode: "tags" or "combobox"
`data-kt-select-placeholder`	string	`""`	Custom placeholder text when no option is selected
`data-kt-select-enable-search`	boolean	`false`	Enable search functionality for filtering options
`data-kt-select-max-selections`	number	`-1`	Maximum number of selectable options in multiple mode, -1 for unlimited
`data-kt-select-disabled`	boolean	`false`	Disable the entire select component
`data-kt-select-remote`	boolean	`false`	Enable remote data loading from API
`data-kt-select-remote-url`	string	`""`	URL to fetch remote data from
`data-kt-select-api-data-property`	string	`""`	Property name in API response that contains the data array
`data-kt-select-data-field-value`	string	`"value"`	Property name in data items for option value
`data-kt-select-data-field-text`	string	`"text"`	Property name in data items for option text
`data-kt-select-data-field-description`	string	`""`	Property name in data items for option description
`data-kt-select-data-field-icon`	string	`""`	Property name in data items for option icon
`data-kt-select-data-field-icon-width`	string	`""`	Width of the icon image
`data-kt-select-data-field-icon-height`	string	`""`	Height of the icon image

Option Attributes

These attributes can be applied to individual options.

Attribute	Type	Description
`data-kt-select-option-icon`	string	URL to an icon image or HTML for custom icon
`data-kt-select-option-description`	string	Additional descriptive text to display with the option
`disabled`	boolean	Native attribute to disable an individual option
`selected`	boolean	Native attribute to preselect an option

Selectors

Selector	Description
`data-kt-select-display`	The element that displays the current selected value(s)
`data-kt-select-dropdown-content`	Container element that holds all dropdown options
`data-kt-select-search`	Element containing the search input field
`data-kt-select-value`	Element that displays the current selected value(s) when active
`data-kt-select-option`	Individual option element within the dropdown

Events

KTSelect provides custom events for interaction with other components or scripts.

Event	Description
`ktselect.change`	Triggered when the selection changes with the new selection in `event.detail.value`
`ktselect.open`	Triggered when the dropdown is opened
`ktselect.close`	Triggered when the dropdown is closed
`ktselect.search`	Triggered when search input changes with search query in `event.detail.query`
`ktselect.ready`	Triggered when the component is fully initialized

JavaScript API

// Get the select element
const selectElement = document.getElementById('mySelect');
 
// Get the KTSelect instance
const instance = selectElement.instance;
 
// Methods available
instance.getValue();              // Get current selection(s)
instance.setValue('option1');     // Set selection by value
instance.setMultipleValues(['option1', 'option2']); // Set multiple selections
instance.openDropdown();          // Open the dropdown
instance.closeDropdown();         // Close the dropdown
instance.enable();                // Enable the select
instance.disable();               // Disable the select
instance.destroy();               // Clean up and remove the component

Customizing with Templates

KTSelect offers a powerful templating system that allows complete customization of the component's appearance without modifying the core functionality.

Template Configuration

Custom templates can be defined directly in HTML using the data-kt-select attribute with a JSON configuration object:

<select data-kt-select='{
  "templates": {
    "option": "<div class=\"custom-option\">{{text}}</div>",
    "selectedDisplay": "<div>{{#if selected}}{{text}}{{else}}Select...{{/if}}</div>",
    "tag": "<span class=\"custom-tag\">{{text}}</span>"
  }
}'>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Available Templates

KTSelect supports templates for all UI components:

Template Key	Description	Available Variables
`option`	Template for single options in the dropdown	`text`, `value`, `description`, `icon`, `selected`, `disabled`
`selectedDisplay`	Template for the display when option(s) are selected	`text`, `selected`, `icon` (or array of options for multiple)
`dropdown`	Template for the dropdown container	`optionsHtml` (rendered options HTML)
`search`	Template for the search input	`searchPlaceholder`
`tag`	Template for individual tags in multi-select mode	`text`, `value`
`noResults`	Template shown when search returns no results	`searchNotFoundText`
`loading`	Template shown during remote data loading	-

Template Syntax

Templates support:

Variable substitution using {{variableName}} syntax
Conditional rendering using {{#if condition}}...{{/if}} blocks
HTML content is preserved for fields like icon

Option Data

Individual options can include additional data through the data-kt-select-option attribute:

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

This data is available in templates through the corresponding variables: {{icon}}, {{description}}, etc.

Custom Theme

To completely change the visual appearance, you can define a custom theme:

// Register a custom theme
const Templates = KTSelect.Templates;
Templates.registerTheme('custom', {
  wrapper: 'custom-select-wrapper',
  display: 'custom-select-display',
  option: 'custom-select-option',
  // Define all required theme properties
});
 
// Apply the theme to an element
const select = document.querySelector('#mySelect');
select.setAttribute('data-kt-select-theme', 'custom');

Complete Example

For more examples of template customization, refer to our advanced templating guide.

PreviouseScrollto NextSeparator

Advanced Select

Examples

Basic Usage

Combobox

Description

Disable Option

Disable Select

Icon

Icon with Descriptions

Combobox with Icons

Multiple Selection with Icons

Icon (Multiple)

Tags with Icons

Items

Max Selection

Multiple

Placeholder

Remote Data

Remote Data (Advanced)

Remote Data with Country Flags

Remote Data with User Profiles

Remote Data (Tags)

Remote Data (Advanced - Tags)

Search

Tags

Tags (Selected)

Modal Integration

Template Customization

Component API

Options

Option Attributes

Selectors

Events

JavaScript API

Customizing with Templates

Template Configuration

Available Templates

Template Syntax

Option Data

Custom Theme

Complete Example