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>

    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

    <div class="min-h-screen p-4 md:p-8">
        <form method="get" action="" class="max-w-6xl mx-auto" x-data="{
            dropdowns: [
                {
                    name: 'country',
                    label: 'Country',
                    items: [
                        { value: 'usa', label: 'USA' },
                        { value: 'china', label: 'China' },
                        { value: 'japan', label: 'Japan' },
                        { value: 'germany', label: 'Germany' },
                        { value: 'uk', label: 'United Kingdom' },
                        { value: 'india', label: 'India' },
                        { value: 'france', label: 'France' },
                        { value: 'italy', label: 'Italy' },
                        { value: 'canada', label: 'Canada' },
                        { value: 'brazil', label: 'Brazil' }
                    ]
                },
                {
                    name: 'brand',
                    label: 'Brand',
                    items: [
                        { value: 'moetchandon', label: 'Moët & Chandon' },
                        { value: 'domperignon', label: 'Dom Pérignon' },
                        { value: 'veuveclicquot', label: 'Veuve Clicquot' },
                        { value: 'crystalroederer', label: 'Louis Roederer Cristal' },
                        { value: 'kruger', label: 'Krug' },
                        { value:...

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';
    }
  });
});