Custom Checkboxes with Filters

by Imri Paloja

HTML

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"
            integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"></script>
            



    
    
    
<div style="min-height: 450px" class="flex justify-center bg-gray-100 p-8 dark:bg-gray-900 dark:scheme-dark">
  <div class="mx-auto w-full max-w-xs">
    <label for="combobox" class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100">Assigned to</label>
    <el-autocomplete class="relative mt-2 block" style="--button-width: 36px; --input-width: 320px;">
      <input id="combobox" type="text" class="block w-full rounded-md bg-white py-1.5 pr-12 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="autocomplete-listbox-1" aria-activedescendant="" autocomplete="off">
      <button type="button" class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-hidden" id="autocomplete-button-0" aria-haspopup="listbox" aria-controls="autocomplete-listbox-1" aria-expanded="false" tabindex="-1" popovertarget="autocomplete-listbox-1">
        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 text-gray-400">
          <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd"></path>
        </svg>
      </button>

      <el-options...

CSS

@theme {
  --color-eb-red: #e60000;
  --color-eb-dark: #1b1e1f;
  --color-eb-gray: #181a1b;

  --font-sans: 'Inter', sans-serif;
}

/* Optional: Additional custom utilities */
@layer utilities {
  /*.text-gradient {*/
  /*    background-clip: text;*/
  /*    -webkit-background-clip: text;*/
  /*    color: transparent;*/
  /*}*/
}

JavaScript

// JavaScript to toggle the dropdown
        const dropdownButton = document.getElementById('dropdown-button');
        const dropdownMenu = document.getElementById('dropdown-menu');
        const searchInput = document.getElementById('search-input');
        let isOpen = false; // Set to true to open the dropdown by default
        
        // Function to toggle the dropdown state
        function toggleDropdown() {
          isOpen = !isOpen;
          dropdownMenu.classList.toggle('hidden', !isOpen);
        }
        
        // Set initial state
        toggleDropdown();
        
        dropdownButton.addEventListener('click', () => {
          toggleDropdown();
        });
        
        // Add event listener to filter items based on input
        searchInput.addEventListener('input', () => {
          const searchTerm = searchInput.value.toLowerCase();
          const items = dropdownMenu.querySelectorAll('a');
        
          items.forEach((item) => {
            const text = item.textContent.toLowerCase();
            if (text.includes(searchTerm)) {
              item.style.display = 'block';
            } else {
              item.style.display = 'none';
            }
          });
        });