Home > Tailwind Components > Advanced Select

Tailwind CSS Advanced Select

To use these form components, remember to:

1. Install the official Tailwind CSS forms plugin using: 

npm install -D @tailwindcss/forms

2. Add the plugin to your tailwind.config.js file: 

// tailwind.config.js
module.exports = {
    theme: {
    // ...
    },
    plugins: [
    require('@tailwindcss/forms'),
    // ...
    ],
}

1. Tailwind Advanced Select Searchable

Select an option 
<div x-data="{ open: false, search: '', selected: '' }" class="relative w-64">
  <!-- Label for the select -->
  <label class="block text-sm font-medium text-gray-700">Searchable Select</label>

  <!-- Dropdown trigger (click to open/close) -->
  <div @click="open = !open; if (open) { setTimeout(() => $refs.searchInput.focus(), 100); }" class="mt-1 flex items-center justify-between px-4 py-2 bg-white border border-gray-300 rounded-md cursor-pointer">
    <!-- Display selected value or placeholder -->
    <span x-text="selected ? selected : 'Select an option'" class="text-gray-900"></span>

    <!-- Dropdown icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M5.292 7.293a1 1 0 011.415 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </div>

  <!-- Dropdown content (shown when 'open' is true) -->
  <div x-show="open" @click.away="open = false" class="absolute mt-1 w-full bg-white shadow-lg rounded-md z-10">
    <!-- Search input field with auto-focus -->
    <input x-ref="searchInput" x-model="search" type="text" class="w-full px-3 py-2 border-b border-gray-200 focus:outline-none" placeholder="Search..." />

    <!-- Filtered options list -->
    <ul class="max-h-48 overflow-auto">
      <template x-for="option in ['Option 1', 'Option 2', 'Option 3', 'Option 4'].filter(opt => opt.toLowerCase().includes(search.toLowerCase()))" :key="option">
        <li @click="selected = option; open = false" class="px-4 py-2 hover:bg-gray-100 cursor-pointer" x-text="option"></li>
      </template>
    </ul>
  </div>
</div>

2. Tailwind Advanced Multi-Select with Checkboxes

Select options 
<div x-data="{ open: false, selected: [] }" class="relative w-64">
  <!-- Label for multi-select -->
  <label class="block text-sm font-medium text-gray-700">Multi-Select</label>
  
  <!-- Dropdown trigger (click to open/close) -->
  <div @click="open = !open" class="mt-1 flex items-center justify-between px-4 py-2 bg-white border border-gray-300 rounded-md cursor-pointer">
    <!-- Display 'X selected' or placeholder -->
    <span x-text="selected.length ? `${selected.length} selected` : 'Select options'" class="text-gray-900"></span>
    
    <!-- Dropdown icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M5.292 7.293a1 1 0 011.415 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </div>

  <!-- Dropdown content (shown when 'open' is true) -->
  <div x-show="open" @click.outside="open = false" class="absolute mt-1 w-full bg-white shadow-lg rounded-md z-10">
    <!-- Options with checkboxes -->
    <ul class="max-h-48 overflow-auto">
      <template x-for="option in ['Option 1', 'Option 2', 'Option 3', 'Option 4']" :key="option">
        <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">
          <!-- Checkbox for multi-selection -->
          <label class="flex items-center space-x-2">
            <input type="checkbox" @click="selected.includes(option) ? selected.splice(selected.indexOf(option), 1) : selected.push(option)" />
            <span x-text="option"></span>
          </label>
        </li>
      </template>
    </ul>
  </div>
</div>

3. Tailwind Advanced Select Tags

<div x-data="{ open: false, search: '', selected: [], options: ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4'] }" class="relative w-64">
  <!-- Label for taggable select -->
  <label class="block text-sm font-medium text-gray-700">Taggable Select</label>

  <!-- Tag input area -->
  <div class="mt-1 px-3 py-2 bg-white border border-gray-300 rounded-md" @click.outside="open = false">
    <div class="flex flex-wrap space-x-1">
      <!-- Display selected tags -->
      <template x-for="tag in selected" :key="tag">
        <span class="bg-blue-500 text-white px-2 py-1 rounded-md text-sm flex items-center">
          <span x-text="tag"></span>
          <!-- Remove tag -->
          <svg @click="selected = selected.filter(t => t !== tag)" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
      </template>
      <!-- Input for typing new tags -->
      <input x-model="search" type="text" placeholder="Add tag"
        @focus="open = true"
        @keydown.enter.prevent="if (search.trim() && !selected.includes(search.trim())) { selected.push(search.trim()); search = ''; open = false }"
        class="outline-none flex-grow px-2 py-1" />
    </div>
  </div>

  <!-- Dropdown content (shown when 'open' is true and there are filtered options or search is not empty) -->
  <div x-show="open && (options.filter(opt => opt.toLowerCase().includes(search.toLowerCase())).length > 0 || search.trim() !== '')"
    class="absolute mt-1 w-full bg-white shadow-lg rounded-md z-10">
    <ul class="max-h-48 overflow-auto">
      <!-- Filtered tag options -->
      <template x-for="option in options.filter(opt => opt.toLowerCase().includes(search.toLowerCase()))" :key="option">
        <li @click="if (!selected.includes(option)) selected.push(option); search = ''; open = false"
          class="px-4 py-2 hover:bg-gray-100 cursor-pointer" x-text="option"></li>
      </template>
    </ul>
  </div>
</div>

4. Tailwind Advanced Select With Disabled Options

Select an option 
<div x-data="{ open: false, selected: '' }" class="relative w-64">
  <!-- Label for select with disabled options -->
  <label class="block text-sm font-medium text-gray-700">Select with Disabled Options</label>

  <!-- Dropdown trigger (click to open/close) -->
  <div @click="open = !open" class="mt-1 px-4 py-2 bg-white border border-gray-300 rounded-md cursor-pointer">
    <!-- Display selected value or placeholder -->
    <span x-text="selected ? selected : 'Select an option'" class="text-gray-900"></span>
  </div>

  <!-- Dropdown content (shown when 'open' is true) -->
  <div x-show="open" @click.outside="open = false" class="absolute mt-1 w-full bg-white shadow-lg rounded-md z-10">
    <ul class="max-h-48 overflow-auto">
      <!-- Options with conditional disabled state -->
      <template x-for="option in [{name: 'Option 1', disabled: false}, {name: 'Option 2', disabled: true}, {name: 'Option 3', disabled: false}]" :key="option.name">
        <li @click="!option.disabled && (selected = option.name); open = !option.disabled && false"
          :class="option.disabled ? 'text-gray-400 cursor-not-allowed' : 'cursor-pointer hover:bg-gray-100'"
          class="px-4 py-2" x-text="option.name">
        </li>
      </template>
    </ul>
  </div>
</div>