Tailwind CSS Search Forms Collection

Explore this collection of versatile search form components built with Tailwind CSS. Designed for easy integration, these forms offer clean, responsive layouts suitable for various web applications.

Each component includes a live preview and readily copyable HTML code. Simply choose the style that fits your needs, copy the code, and paste it into your Tailwind project. Customize the utility classes further to match your specific design system.

Basic Search Form

<!-- Basic Search Form -->
<form class="flex items-center space-x-2">
  <label for="search-basic" class="sr-only">Search</label>
  <input type="search" id="search-basic" name="search-basic" placeholder="Search..." class="flex-grow px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
  <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
    </svg>
    <span class="sr-only">Search</span>
  </button>
</form>

Autocomplete / Predictive Search

Note: Autocomplete suggestions require JavaScript to function.

<!-- Autocomplete / Predictive Search -->
<div class="relative">
  <form class="flex items-center space-x-2">
    <label for="search-autocomplete" class="sr-only">Search</label>
    <input type="search" id="search-autocomplete" name="search-autocomplete" placeholder="Type to search..." class="flex-grow px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
      </svg>
      <span class="sr-only">Search</span>
    </button>
  </form>

  <!-- Dropdown for suggestions (requires JavaScript) -->
  <!-- Add 'hidden' class to hide initially -->
  <div class="absolute left-0 right-0 mt-1 bg-white border border-gray-300 rounded-md shadow-lg z-10 hidden">
    <!-- Suggestions populated by JS -->
    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Suggestion 1</a>
    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Suggestion 2</a>
  </div>
  <p class="text-xs text-gray-500 mt-1 italic">Note: Autocomplete suggestions require JavaScript to function.</p>
</div>

Filterable (Faceted) Search

Filters

Category

Price Range

<!-- Filterable (Faceted) Search -->
<form class="md:flex md:space-x-6">
  <!-- Search Input Area -->
  <div class="flex-grow mb-6 md:mb-0">
    <label for="search-filterable" class="sr-only">Search items</label>
    <div class="relative">
      <input type="search" id="search-filterable" name="q" placeholder="Search items..." class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
        </svg>
      </div>
    </div>
  </div>

  <!-- Filters Sidebar/Section -->
  <div class="md:w-1/3 lg:w-1/4 space-y-4">
    <h3 class="text-sm font-semibold text-gray-600 uppercase tracking-wide">Filters</h3>

    <!-- Category Filter -->
    <div>
      <h4 class="font-medium text-gray-800 mb-2">Category</h4>
      <div class="space-y-1">
        <label class="flex items-center space-x-2">
          <input type="checkbox" name="category[]" value="electronics" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 focus:ring-opacity-50">
          <span class="text-sm text-gray-700">Electronics</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" name="category[]" value="clothing" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 focus:ring-opacity-50">
          <span class="text-sm text-gray-700">Clothing</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="checkbox" name="category[]" value="home" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 focus:ring-opacity-50">
          <span class="text-sm text-gray-700">Home Goods</span>
        </label>
      </div>
    </div>

    <!-- Price Range Filter -->
    <div>
      <h4 class="font-medium text-gray-800 mb-2">Price Range</h4>
      <div class="space-y-1">
        <label class="flex items-center space-x-2">
          <input type="radio" name="price_range" value="0-50" class="text-blue-600 focus:ring-blue-500">
          <span class="text-sm text-gray-700">$0 - $50</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="radio" name="price_range" value="51-200" class="text-blue-600 focus:ring-blue-500">
          <span class="text-sm text-gray-700">$51 - $200</span>
        </label>
        <label class="flex items-center space-x-2">
          <input type="radio" name="price_range" value="200+" class="text-blue-600 focus:ring-blue-500">
          <span class="text-sm text-gray-700">$200+</span>
        </label>
      </div>
    </div>

    <!-- Submit Button -->
    <button type="submit" class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Apply Filters</button>
  </div>
</form>

Advanced Search Form

<!-- Advanced Search Form -->
<form class="space-y-4 p-6 border border-gray-200 rounded-lg bg-gray-50">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div>
      <label for="adv-keywords" class="block text-sm font-medium text-gray-700 mb-1">Keywords</label>
      <input type="text" id="adv-keywords" name="keywords" placeholder="Enter keywords..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
    </div>
    <div>
      <label for="adv-exact-phrase" class="block text-sm font-medium text-gray-700 mb-1">Exact Phrase</label>
      <input type="text" id="adv-exact-phrase" name="exact_phrase" placeholder="Enter exact phrase..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
    </div>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <div>
      <label for="adv-category" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
      <select id="adv-category" name="category" class="w-full px-3 py-2 border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
        <option value="">Any Category</option>
        <option value="tech">Technology</option>
        <option value="news">News</option>
        <option value="sports">Sports</option>
      </select>
    </div>
    <div>
      <label for="adv-date-from" class="block text-sm font-medium text-gray-700 mb-1">Date From</label>
      <input type="date" id="adv-date-from" name="date_from" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
    </div>
    <div>
      <label for="adv-date-to" class="block text-sm font-medium text-gray-700 mb-1">Date To</label>
      <input type="date" id="adv-date-to" name="date_to" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
    </div>
  </div>
  <div class="flex justify-end space-x-3 pt-2">
    <button type="reset" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-1">Reset</button>
    <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Advanced Search
      </button>
  </div>
</form>

Guided / Step-by-Step Search

Step 1: What are you looking for?

Note: Step progression and conditional logic require JavaScript.

<!-- Guided / Step-by-Step Search (Example Step 1) -->
<!-- Requires JavaScript to show/hide steps and handle logic -->
<div class="p-6 border border-gray-200 rounded-lg bg-white shadow-sm">
  <!-- Step 1: Add 'hidden' class to inactive steps -->
  <div class="step-1">
    <h3 class="text-lg font-medium text-gray-800 mb-3">Step 1: What are you looking for?</h3>
    <div class="space-y-2">
      <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 cursor-pointer">
        <input type="radio" name="guided-choice-1" value="product" class="text-blue-600 focus:ring-blue-500 mr-3">
        <span class="text-gray-700">A specific product</span>
      </label>
      <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 cursor-pointer">
        <input type="radio" name="guided-choice-1" value="information" class="text-blue-600 focus:ring-blue-500 mr-3">
        <span class="text-gray-700">Information or articles</span>
      </label>
      <label class="flex items-center p-3 border rounded-md hover:bg-gray-50 cursor-pointer">
        <input type="radio" name="guided-choice-1" value="service" class="text-blue-600 focus:ring-blue-500 mr-3">
        <span class="text-gray-700">A service provider</span>
      </label>
    </div>
    <div class="mt-4 text-right">
      <!-- Button triggers next step via JS -->
      <button type="button" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Next Step</button>
    </div>
  </div>

  <!-- Example: Step 2 (Hidden Initially) -->
  <div class="step-2 hidden">
     <h3 class="text-lg font-medium text-gray-800 mb-3">Step 2: Specify Details</h3>
     <!-- Add relevant inputs for step 2 -->
     <input type="text" placeholder="Enter details..." class="w-full px-3 py-2 border border-gray-300 rounded-md">
     <div class="mt-4 flex justify-between">
        <button type="button" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">Previous</button>
        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Search</button>
     </div>
  </div>

   <p class="text-xs text-gray-500 mt-3 italic">Note: Step progression and conditional logic require JavaScript.</p>
</div>

Voice Search

Note: Voice input requires JavaScript and browser support for the Web Speech API.

<!-- Voice Search -->
<form class="flex items-center space-x-2">
  <label for="search-voice" class="sr-only">Search</label>
  <div class="relative flex-grow">
    <input type="search" id="search-voice" name="q" placeholder="Click mic or type..." class="w-full px-4 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">

    <!-- Voice Input Button (Requires JS & Web Speech API) -->
    <button type="button" title="Start Voice Search" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-500 hover:text-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded-r-md">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4z" />
        <path fill-rule="evenodd" d="M5.5 8.5A.5.5 0 016 8h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd" />
        <path d="M9 13.5V16a1 1 0 001 1h0a1 1 0 001-1v-2.5A4.5 4.5 0 0015.5 9h-1A3.5 3.5 0 0111 12.5V13h-2v-.5A3.5 3.5 0 015.5 9h-1A4.5 4.5 0 009 13.5z" />
      </svg>
      <span class="sr-only">Start Voice Search</span>
    </button>
  </div>
  <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
      Search
  </button>
</form>
<p class="text-xs text-gray-500 mt-1 italic">Note: Voice input requires JavaScript and browser support for the Web Speech API.</p>

Visual Search

Note: Image upload and visual search processing require JavaScript and backend logic.

<!-- Visual Search -->
<form class="flex items-center space-x-2">
  <label for="search-visual" class="sr-only">Search by text or image</label>
  <div class="relative flex-grow">
    <input type="search" id="search-visual" name="q" placeholder="Search or upload an image..." class="w-full px-4 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">

    <!-- Image Upload Button/Trigger -->
    <label for="visual-upload-input" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-500 hover:text-blue-600 cursor-pointer focus-within:ring-1 focus-within:ring-blue-500 rounded-r-md">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-4 2 2 4-4 2 2z" clip-rule="evenodd" />
      </svg>
      <span class="sr-only">Upload Image for Search</span>
      <!-- Actual file input, hidden -->
      <input type="file" id="visual-upload-input" accept="image/*" class="sr-only">
    </label>
  </div>
  <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
    Search
  </button>
</form>

<!-- Optional: Placeholder for uploaded image preview (controlled by JS) -->
<div class="mt-2 text-center hidden">
  <img src="https://picsum.photos/80/80" alt="Uploaded image preview" class="inline-block h-20 w-20 object-cover rounded border border-gray-300">
</div>
<p class="text-xs text-gray-500 mt-1 italic">Note: Image upload and visual search processing require JavaScript and backend logic.</p>

E-commerce Product Search

<!-- E-commerce Product Search -->
<form class="bg-white p-4 rounded-lg shadow border border-gray-200 md:flex md:items-center md:space-x-2 space-y-3 md:space-y-0">
  <!-- Search Input -->
  <div class="flex-grow">
    <label for="search-ecommerce" class="sr-only">Search Products</label>
    <div class="relative">
      <input type="search" id="search-ecommerce" name="q" placeholder="Search products..." class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
        </svg>
      </div>
    </div>
  </div>

  <!-- Category Selector -->
  <div class="md:w-auto">
    <label for="ecommerce-category" class="sr-only">Category</label>
    <select id="ecommerce-category" name="category" class="w-full md:w-auto px-3 py-2 border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
      <option value="all">All Categories</option>
      <option value="electronics">Electronics</option>
      <option value="fashion">Fashion</option>
      <option value="home">Home & Garden</option>
      <option value="toys">Toys & Games</option>
    </select>
  </div>

  <!-- Submit Button -->
  <div class="md:w-auto">
    <button type="submit" class="w-full md:w-auto px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Search
    </button>
  </div>
</form>

Search with Category Selector

<!-- Search with Category Selector -->
<form class="flex items-center border border-gray-300 rounded-md overflow-hidden focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-transparent">
  <!-- Category Dropdown -->
  <label for="cat-select-category" class="sr-only">Select Category</label>
  <select id="cat-select-category" name="category" class="px-3 py-2 border-r border-gray-300 bg-gray-50 text-sm text-gray-600 focus:outline-none appearance-none">
      <option value="all">All</option>
      <option value="articles">Articles</option>
      <option value="products">Products</option>
      <option value="users">Users</option>
  </select>

  <!-- Search Input -->
  <label for="search-cat-selector" class="sr-only">Search</label>
  <input type="search" id="search-cat-selector" name="q" placeholder="Search within category..." class="flex-grow px-4 py-2 border-none focus:outline-none">

  <!-- Submit Button -->
  <button type="submit" class="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
      </svg>
      <span class="sr-only">Search</span>
  </button>
</form>

Search with Tabs

Note: Switching search context based on tabs requires JavaScript.

<!-- Search with Tabs -->
<!-- Requires JavaScript to handle tab switching logic and update hidden input/placeholder -->
<div class="border border-gray-200 rounded-lg overflow-hidden">
  <!-- Tabs Section -->
  <div class="flex border-b border-gray-200 bg-gray-50">
    <!-- Add 'active' class and styles to the current tab via JS -->
    <button type="button" class="search-tab-button active px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600 focus:outline-none" data-search-type="website" data-placeholder="Search Website...">
      Website
    </button>
    <button type="button" class="search-tab-button px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 focus:outline-none" data-search-type="images" data-placeholder="Search Images...">
      Images
    </button>
    <button type="button" class="search-tab-button px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 focus:outline-none" data-search-type="videos" data-placeholder="Search Videos...">
      Videos
    </button>
    <!-- Hidden input to store the current search type -->
    <input type="hidden" id="search-type-hidden" name="search_type" value="website">
  </div>

  <!-- Search Input Section -->
  <form class="flex items-center p-3">
    <label for="search-with-tabs-input" class="sr-only">Search</label>
    <!-- Placeholder should be updated by JS based on active tab -->
    <input type="search" id="search-with-tabs-input" name="q" placeholder="Search Website..." class="flex-grow px-3 py-1.5 border border-gray-300 rounded-l-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 z-10">
    <button type="submit" class="px-4 py-1.5 bg-blue-600 text-white rounded-r-md border border-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-0 -ml-px">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
      </svg>
      <span class="sr-only">Search</span>
    </button>
  </form>
   <p class="text-xs text-gray-500 p-3 pt-0 italic">Note: Switching search context based on tabs requires JavaScript.</p>
</div>

<!-- Example JS Snippet (Conceptual - adapt to your framework/needs) -->
<!--
<script>
  const tabButtons = document.querySelectorAll('.search-tab-button');
  const searchInput = document.getElementById('search-with-tabs-input');
  const hiddenInput = document.getElementById('search-type-hidden');

  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      // Remove active styles from all tabs
      tabButtons.forEach(btn => {
        btn.classList.remove('active', 'text-blue-600', 'border-blue-600');
        btn.classList.add('text-gray-500', 'hover:text-gray-700');
      });
      // Add active styles to clicked tab
      button.classList.add('active', 'text-blue-600', 'border-blue-600');
      button.classList.remove('text-gray-500', 'hover:text-gray-700');

      // Update hidden input and placeholder
      const searchType = button.dataset.searchType;
      const placeholder = button.dataset.placeholder;
      hiddenInput.value = searchType;
      searchInput.placeholder = placeholder;
      searchInput.focus(); // Optional: focus input on tab change
    });
  });
</script>
-->

Fullscreen Search Overlay

Note: Requires JavaScript to toggle the overlay visibility.

Press Esc to close

<!-- Fullscreen Search Overlay -->

<!-- 1. Button to Trigger the Overlay -->
<button id="open-fullscreen-search" type="button" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-md border border-gray-300 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
  </svg>
  Open Fullscreen Search
</button>
<p class="text-xs text-gray-500 mt-1 italic">Note: Requires JavaScript to toggle the overlay visibility.</p>


<!-- 2. The Overlay Structure (place near end of body or outside main flow) -->
<!-- Add 'active' class via JS to show -->
<div id="search-overlay" class="search-overlay"> <!-- See CSS for .search-overlay styles -->
  <!-- Close Button -->
  <button id="close-fullscreen-search" type="button" class="close-button" title="Close Search">&times;</button> <!-- See CSS for .close-button -->

  <!-- Search Form -->
  <form class="w-full max-w-xl">
    <label for="fullscreen-search-input" class="sr-only">Search</label>
    <div class="relative">
      <input type="search" id="fullscreen-search-input" name="q" placeholder="Enter your search term..." class="w-full px-6 py-4 text-xl text-gray-900 bg-white border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" autocomplete="off">
      <button type="submit" class="absolute inset-y-0 right-0 px-6 flex items-center text-blue-600 hover:text-blue-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
        </svg>
        <span class="sr-only">Search</span>
      </button>
    </div>
    <p class="text-center text-gray-300 text-sm mt-4">Press Esc to close</p>
  </form>
</div>

<!-- 3. CSS (include in your <style> tag or CSS file) -->
<!--
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.search-overlay.active {
  opacity: 1;
  visibility: visible;
}
.search-overlay .close-button {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}
-->

<!-- 4. JavaScript (Example for toggling) -->
<!--
<script>
  const openBtn = document.getElementById('open-fullscreen-search');
  const closeBtn = document.getElementById('close-fullscreen-search');
  const overlay = document.getElementById('search-overlay');
  const searchInput = document.getElementById('fullscreen-search-input');

  function openSearch() {
    overlay.classList.add('active');
    document.body.style.overflow = 'hidden'; // Prevent background scroll
    searchInput.focus(); // Focus input when opened
  }

  function closeSearch() {
    overlay.classList.remove('active');
    document.body.style.overflow = ''; // Restore scroll
  }

  openBtn.addEventListener('click', openSearch);
  closeBtn.addEventListener('click', closeSearch);

  // Optional: Close on Escape key
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && overlay.classList.contains('active')) {
      closeSearch();
    }
  });

  // Optional: Close if clicked outside the form (on the backdrop)
  overlay.addEventListener('click', (event) => {
    if (event.target === overlay) { // Check if click is directly on the overlay
        closeSearch();
    }
  });
</script>
-->

Search Modal or Popup

Note: Requires JavaScript to toggle the modal visibility.

<!-- Search Modal or Popup -->

<!-- 1. Button to Trigger the Modal -->
<button id="open-search-modal" type="button" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
  </svg>
  Open Search Modal
</button>
<p class="text-xs text-gray-500 mt-1 italic">Note: Requires JavaScript to toggle the modal visibility.</p>


<!-- 2. The Modal Structure (place near end of body or outside main flow) -->
<!-- Add 'active' class to backdrop via JS to show -->
<div id="search-modal-backdrop" class="search-modal-backdrop"> <!-- See CSS for .search-modal-backdrop -->
  <div class="search-modal" role="dialog" aria-modal="true" aria-labelledby="search-modal-title"> <!-- See CSS for .search-modal -->
      <!-- Close Button -->
      <button id="close-search-modal" type="button" class="close-button" title="Close Modal">&times;</button> <!-- See CSS for .close-button -->

      <!-- Modal Title -->
      <h2 id="search-modal-title" class="text-lg font-medium text-gray-900 mb-4">Search Site</h2>

      <!-- Search Form -->
      <form>
        <label for="modal-search-input" class="sr-only">Search</label>
        <div class="relative">
          <input type="search" id="modal-search-input" name="q" placeholder="What are you looking for?" class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" autocomplete="off">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>
        <div class="mt-4 text-right">
            <button type="submit" class="px-5 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
              Search
          </button>
        </div>
      </form>
  </div>
</div>

<!-- 3. CSS (include in your <style> tag or CSS file) -->
<!--
.search-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.search-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}
.search-modal {
  background-color: white;
  padding: 2rem;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  width: 100%;
  max-width: 500px; /* Adjust as needed */
  position: relative;
}
.search-modal .close-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: #6b7280; /* gray-500 */
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}
.search-modal .close-button:hover {
    color: #1f2937; /* gray-800 */
}
-->

<!-- 4. JavaScript (Example for toggling) -->
<!--
<script>
  const openModalBtn = document.getElementById('open-search-modal');
  const closeModalBtn = document.getElementById('close-search-modal');
  const modalBackdrop = document.getElementById('search-modal-backdrop');
  const modalSearchInput = document.getElementById('modal-search-input');

  function openModal() {
    modalBackdrop.classList.add('active');
    document.body.style.overflow = 'hidden'; // Prevent background scroll
    modalSearchInput.focus(); // Focus input when opened
  }

  function closeModal() {
    modalBackdrop.classList.remove('active');
    document.body.style.overflow = ''; // Restore scroll
  }

  openModalBtn.addEventListener('click', openModal);
  closeModalBtn.addEventListener('click', closeModal);

  // Optional: Close on Escape key
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && modalBackdrop.classList.contains('active')) {
      closeModal();
    }
  });

  // Optional: Close if clicked on the backdrop (outside the modal content)
  modalBackdrop.addEventListener('click', (event) => {
    if (event.target === modalBackdrop) {
      closeModal();
    }
  });
</script>
-->

Tag-Based Search

Tailwind CSS

Note: Adding, removing, and submitting tags requires JavaScript.

<!-- Tag-Based Search -->
<!-- Requires JavaScript for tag input handling, display, and removal -->
<form class="space-y-4">
  <!-- Tag Input Field -->
  <div>
    <label for="search-tags-input" class="block text-sm font-medium text-gray-700 mb-1">Search by Tags</label>
    <input type="text" id="search-tags-input" placeholder="Type a tag and press Enter..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
    <!-- Hidden input to store selected tag values (e.g., comma-separated) -->
    <input type="hidden" name="tags" id="hidden-tags-input" value="">
  </div>

  <!-- Display Area for Selected Tags -->
  <div id="selected-tags-container" class="flex flex-wrap gap-2">
    <!-- Example Tag (JS should generate these) -->
    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800" data-tag-value="ExampleTag">
      ExampleTag
      <button type="button" class="tag-remove-button ml-1.5 flex-shrink-0 text-blue-500 hover:text-blue-700 focus:outline-none">
        <span class="sr-only">Remove ExampleTag tag</span>
        &times;
      </button>
    </span>
    <!-- More tags will be added here by JS -->
  </div>

  <!-- Submit Button -->
  <div class="text-right">
    <button type="submit" class="px-5 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Search with Tags
    </button>
  </div>
  <p class="text-xs text-gray-500 mt-1 italic">Note: Adding, removing, and submitting tags requires JavaScript.</p>
</form>

<!-- Example JS Snippet (Conceptual) -->
<!--
<script>
  const tagInput = document.getElementById('search-tags-input');
  const hiddenInput = document.getElementById('hidden-tags-input');
  const tagsContainer = document.getElementById('selected-tags-container');
  let tags = []; // Array to hold tag values

  function renderTags() {
    tagsContainer.innerHTML = ''; // Clear current tags
    tags.forEach(tag => {
      const tagElement = document.createElement('span');
      // Customize colors/styles as needed
      tagElement.className = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800';
      tagElement.dataset.tagValue = tag;
      tagElement.innerHTML = `
        ${tag}
        <button type="button" class="tag-remove-button ml-1.5 flex-shrink-0 text-gray-500 hover:text-gray-700 focus:outline-none">
          <span class="sr-only">Remove ${tag} tag</span>
          &times;
        </button>
      `;
      tagsContainer.appendChild(tagElement);
    });
    // Update hidden input value
    hiddenInput.value = tags.join(','); // Or use JSON, etc.

    // Add event listeners to remove buttons
    document.querySelectorAll('.tag-remove-button').forEach(button => {
       button.addEventListener('click', handleRemoveTag);
    });
  }

  function handleAddTag(event) {
     if (event.key === 'Enter' && tagInput.value.trim() !== '') {
        event.preventDefault(); // Prevent form submission on Enter in input
        const newTag = tagInput.value.trim();
        if (!tags.includes(newTag)) { // Prevent duplicates
            tags.push(newTag);
            renderTags();
        }
        tagInput.value = ''; // Clear input
     }
  }

   function handleRemoveTag(event) {
     const tagToRemove = event.target.closest('span').dataset.tagValue;
     tags = tags.filter(tag => tag !== tagToRemove);
     renderTags();
   }

  // Initial load (if hidden input has pre-filled tags)
  if (hiddenInput.value) {
      tags = hiddenInput.value.split(',').filter(t => t); // Filter empty strings
      renderTags();
  }

  tagInput.addEventListener('keydown', handleAddTag);

  // Initial render for any example tags present in HTML
  // renderTags(); // Or remove example tags from HTML and rely only on JS

</script>
-->

FAQ on Tailwind CSS Search Forms

How do I create a basic search form with Tailwind CSS?

Creating a search form with Tailwind CSS is straightforward. Use utility classes to style your HTML input fields and form elements. Combine input group styling with a search icon integration for better UX. This frontend framework approach makes building search components quick without writing custom CSS.

How can I make my Tailwind search form responsive?

Use Tailwind's responsive prefixes (sm:, md:, lg:) to adjust your search UI at different breakpoints. For mobile-friendly search, consider a mobile-first design approach with these techniques:

  • Stack elements vertically on small screens
  • Use full width on mobile, fixed width on larger screens
  • Adjust input padding and font size accordingly

What's the best way to style search input focus states?

Style focus states using Tailwind's focus: prefix for input field design. This creates subtle effects when users interact with your search components, enhancing the user interface elements and improving form accessibility through visual feedback.

How do I add a search icon to my Tailwind form?

For search icon integration, use Hero icons or another icon library. Create a positioned container with flexbox. This maintains form layout techniques while improving visual feedback. CSS Grid can also be used for more complex search box examples.

Can I implement dark mode for Tailwind search forms?

Yes! Dark mode forms are simple with Tailwind CSS. Use the dark: variant to create different styles for light and dark themes. This utility-first CSS method works automatically with system preferences or with custom JavaScript toggle implementations.

How do I handle form validation in Tailwind search forms?

Use form validation states with utility classes. Combine HTML attributes with Tailwind classes for valid and invalid states. Pair this with JavaScript for more complex form submission handling and state management.

What's the best approach for search autocomplete with Tailwind?

Search autocomplete requires JavaScript integration with your Tailwind components. Create a dropdown menu design that appears below your input. Use Alpine.js or React form components to manage the state and interaction of your search results formatting.

How can I customize Tailwind search forms beyond the defaults?

Customization is core to Tailwind's atomic CSS approach. Extend your tailwind.config.js file with custom colors, spacing, and components. This creates search field customization options for consistent design system integration across your form UI kit.

How do I create accessible search forms with Tailwind?

Always include these web accessibility features:

  • Label elements (visibly or with sr-only)
  • Appropriate ARIA attributes
  • Sufficient color contrast
  • Keyboard navigation support

These practices ensure your interactive form elements are usable by everyone.

Can I create search filters with Tailwind CSS?

Search filter design can be implemented by combining form elements like select dropdowns, checkboxes or radio buttons with your search input. This approach enhances search functionality while maintaining a clean form component library structure.