Select · Panel

Basic Usage

The most common use case - selecting one option from a dropdown.

<select
  class="mv-select"
  data-mv-select="true"
  data-mv-select-placeholder="Select a framework"
  data-mv-select-config='{
      "optionsClass": "mv-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="mv-select"
  data-mv-select="true"
  data-mv-select-placeholder="Please select a field type..."
  data-mv-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="mv-select"
  data-mv-select="true"
  data-mv-select-disabled="true"
  data-mv-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="mv-select"
  data-mv-select="true"
  data-mv-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="mv-select mv-select-sm"
    data-mv-select="true"
    data-mv-select-multiple="true"
    data-mv-select-placeholder="Select a framework"
    data-mv-select-config='{
          "optionsClass": "mv-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="mv-select mv-select-md"
    data-mv-select="true"
    data-mv-select-multiple="true"
    data-mv-select-placeholder="Select a framework"
    data-mv-select-config='{
          "optionsClass": "mv-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="mv-select mv-select-lg"
    data-mv-select="true"
    data-mv-select-multiple="true"
    data-mv-select-placeholder="Select a framework"
    data-mv-select-config='{
          "optionsClass": "mv-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="mv-select"
  data-mv-select="true"
  data-mv-select-multiple="true"
  data-mv-select-max-selections="3"
  data-mv-select-placeholder="Select cities..."
  data-mv-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="mv-select"
  data-mv-select="true"
  data-mv-select-multiple="true"
  data-mv-select-max-selections="3"
  data-mv-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.

Team Members

Countries

Skills

<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="mv-select"
      data-mv-select="true"
      data-mv-select-placeholder="Select team members..."
      data-mv-select-multiple="true"
      data-mv-select-tags="true"
      data-mv-select-pre-selected="jenny,mike,david"
      data-mv-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="mv-select"
      data-mv-select="true"
      data-mv-select-placeholder="Select countries..."
      data-mv-select-multiple="true"
      data-mv-select-tags="true"
      data-mv-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="mv-select"
      data-mv-select="true"
      data-mv-select-placeholder="Select your skills..."
      data-mv-select-multiple="true"
      data-mv-select-tags="true"
      data-mv-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.

Countries

<div>
  <label class="block mb-3 font-semibold text-gray-800" for="select-countries"
    >Countries</label
  ><select
    class="mv-select"
    data-mv-select="true"
    data-mv-select-placeholder="Type or select a country..."
    data-mv-select-multiple="true"
    data-mv-select-tags="true"
    data-mv-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": "mv-select-option"
        }'
  >
    <option
      value="us"
      data-mv-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-mv-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" /&gt;"}'
    >
      Germany
    </option>
    <option
      value="it"
      data-mv-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" /&gt;"}'
    >
      Italy
    </option>
    <option
      value="fr"
      data-mv-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" /&gt;"}'
    >
      France
    </option>
    <option
      value="es"
      data-mv-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" /&gt;"}'
    >
      Spain
    </option>
    <option
      value="jp"
      data-mv-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" /&gt;"}'
    >
      Japan
    </option>
    <option
      value="ru"
      data-mv-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.

Countries

<div>
  <label class="block mb-3 font-semibold text-gray-800" for="select-countries"
    >Countries</label
  ><select
    class="mv-select"
    data-mv-select="true"
    data-mv-select-placeholder="Select countries..."
    data-mv-select-multiple="true"
    data-mv-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.

Countries

<div>
  <label class="block mb-3 font-semibold text-gray-800" for="select-countries"
    >Countries</label
  ><select
    class="mv-select"
    data-mv-select="true"
    data-mv-select-placeholder="Select countries..."
    data-mv-select-pre-selected="de,fr"
    data-mv-select-multiple="true"
    data-mv-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.

Default label ({{count}} selected)

Custom label via selectedCountText

<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="mv-select"
      data-mv-select="true"
      data-mv-select-placeholder="Select countries..."
      data-mv-select-multiple="true"
      data-mv-select-tags="true"
      data-mv-select-pre-selected="de,fr,it"
      data-mv-select-config='{
            "showSelectedCount": true,
            "optionsClass": "mv-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="mv-select"
      data-mv-select="true"
      data-mv-select-placeholder="Select team members..."
      data-mv-select-multiple="true"
      data-mv-select-tags="true"
      data-mv-select-pre-selected="jenny,mike"
      data-mv-select-config='{
            "showSelectedCount": true,
            "selectedCountText": "{{count}} team members",
            "optionsClass": "mv-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

Enable search within the dropdown options.

<select
  class="mv-select"
  data-mv-select="true"
  data-mv-select-enable-search="true"
  data-mv-select-search-placeholder="Search..."
  data-mv-select-placeholder="Select a brand..."
  data-mv-select-config='{
      "optionsClass": "mv-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="mv-select"
  data-mv-select="true"
  data-mv-select-remote="true"
  data-mv-select-data-url="https://jsonplaceholder.typicode.com/users"
  data-mv-select-data-field-value="id"
  data-mv-select-data-field-text="name"
  data-mv-select-enable-search="true"
  data-mv-select-search-param="q"
  data-mv-select-search-min-length="2"
  data-mv-select-search-debounce="300"
  data-mv-select-debug="true"
  data-mv-select-placeholder="Search users..."
></select>

Icons

Add icons to options for better visual identification.

<select
  class="mv-select"
  data-mv-select="true"
  data-mv-select-placeholder="Select an option..."
  data-mv-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 mv-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-mv-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-mv-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-mv-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-mv-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-mv-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="mv-select mv-select-lg"
  data-mv-select="true"
  data-mv-select-multiple="true"
  data-mv-select-placeholder="Select an option"
  data-mv-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 mv-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-mv-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-mv-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-mv-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-mv-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-mv-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="mv-select"
  data-mv-select="true"
  data-mv-select-enable-search="true"
  data-mv-select-search-placeholder="Search..."
  data-mv-select-placeholder="Select a user..."
  data-mv-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 mv-select-option-selected:block\"&gt;&lt;path d=\"M20 6 9 17l-5-5\"/&gt;&lt;/svg&gt;",
      "optionsClass": "mv-scrollable overflow-auto max-h-[250px]"
    }'
>
  <option
    value="1"
    data-mv-select-option='{"avatar": "https://randomuser.me/api/portraits/women/68.jpg"}'
  >
    Ana Nilson
  </option>
  <option
    value="2"
    data-mv-select-option='{"avatar": "https://randomuser.me/api/portraits/men/46.jpg"}'
  >
    Robert Brown
  </option>
  <option
    value="3"
    data-mv-select-option='{"avatar": "https://randomuser.me/api/portraits/men/29.jpg"}'
  >
    John Doe
  </option>
  <option
    value="4"
    data-mv-select-option='{"avatar": "https://randomuser.me/api/portraits/women/48.jpg"}'
    selected=""
  >
    Nina Erin
  </option>
  <option
    value="5"
    data-mv-select-option='{"avatar": "https://randomuser.me/api/portraits/men/58.jpg"}'
  >
    Mark Larson
  </option>
  <option
    value="6"
    data-mv-select-option='{"avatar": "https://randomuser.me/api/portraits/men/68.jpg"}'
  >
    Nick Strong
  </option>
  <option
    value="7"
    data-mv-select-option='{"avatar": "https://randomuser.me/api/portraits/women/68.jpg"}'
  >
    Ana Nilson
  </option>
  <option
    value="8"
    data-mv-select-option='{"avatar": "https://randomuser.me/api/portraits/women/58.jpg"}'
  >
    Kate Leo
  </option>
  <option
    value="9"
    data-mv-select-option='{"avatar": "https://randomuser.me/api/portraits/men/38.jpg"}'
  >
    Elon White
  </option>
  <option
    value="10"
    data-mv-select-option='{"avatar": "https://randomuser.me/api/portraits/men/8.jpg"}'
  >
    Bill Smith
  </option>
</select>

Country Selection

Country selection with flag icons.

<select
  class="mv-select"
  data-mv-select="true"
  data-mv-select-enable-search="true"
  data-mv-select-search-placeholder="Search..."
  data-mv-select-placeholder="Select a country..."
  data-mv-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 mv-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-mv-select-option='{"flag": "🇺🇸"}'>USA</option>
  <option value="germany" data-mv-select-option='{"flag": "🇩🇪"}'>
    Germany
  </option>
  <option value="italy" data-mv-select-option='{"flag": "🇮🇹"}'>Italy</option>
  <option value="france" data-mv-select-option='{"flag": "🇫🇷"}'>France</option>
  <option value="spain" data-mv-select-option='{"flag": "🇪🇸"}'>Spain</option>
  <option value="canada" data-mv-select-option='{"flag": "🇨🇦"}'>Canada</option>
  <option value="australia" data-mv-select-option='{"flag": "🇦🇺"}'>
    Australia
  </option>
  <option value="japan" data-mv-select-option='{"flag": "🇯🇵"}'>Japan</option>
</select>

Description

Options with additional description text.

<select
  class="mv-select"
  data-mv-select="true"
  data-mv-select-placeholder="Select an option..."
  data-mv-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 mv-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-mv-select-option='{"desc": "Can modify and delete"}'
  >
    Full access
  </option>
  <option
    value="read_write"
    data-mv-select-option='{"desc": "Can read and write"}'
  >
    Read and write
  </option>
  <option
    value="read_only"
    data-mv-select-option='{"desc": "Can only read"}'
    selected=""
  >
    Read only
  </option>
  <option value="view_only" data-mv-select-option='{"desc": "Can only view"}'>
    View only
  </option>
  <option value="no_access" data-mv-select-option='{"desc": "No access"}'>
    No access
  </option>
</select>

Modal Integration

Select components inside modal dialogs.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal">Show Modal</button>
  <div class="mv-modal" data-mv-modal="true" id="modal">
    <div class="mv-modal-content max-w-[400px] top-[10%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-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="mv-modal-body">
        <select
          class="mv-select"
          data-mv-select="true"
          data-mv-select-placeholder="Select a framework..."
          data-mv-select-config='{
            "optionsClass": "mv-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="mv-select"
  data-mv-select="true"
  data-mv-select-placeholder="Type or select a country..."
  data-mv-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": "mv-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": "mv-select-option",
        "placeholder": "Select a country...",
        "placeholderClass": "mv-select-placeholder",
        "placeholderTemplate": "&lt;span class=\"mv-select-placeholder\"&gt;{{placeholder}}&lt;/span&gt;",
        "displaySeparator": ", ",
        "tagTemplate": "&lt;span class=\"mv-select-tag\"&gt;{{text}}&lt;/span&gt;"
      }'
>
  <option
    value="us"
    data-mv-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-mv-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" /&gt;"}'
  >
    Germany
  </option>
  <option
    value="it"
    data-mv-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" /&gt;"}'
  >
    Italy
  </option>
  <option
    value="fr"
    data-mv-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" /&gt;"}'
  >
    France
  </option>
  <option
    value="es"
    data-mv-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" /&gt;"}'
  >
    Spain
  </option>
  <option
    value="jp"
    data-mv-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" /&gt;"}'
  >
    Japan
  </option>
  <option
    value="ru"
    data-mv-select-option='{"icon": "&lt;img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" /&gt;"}'
  >
    Russia
  </option>
</select>