Multi-Select Dropdown Filter with search

Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

This tailwind example is contributed by SANJAY SINGH GARIYA, on 11-Jun-2025. Component is made with Tailwind v3.4. It is responsive.

Form Select Dropdown Tag Cloud

Author SANJAY SINGH GARIYA

Tailwind v3.4 2.3k 5

Fork Fullscreen

<div class=" mx-auto">
                        
                        <div class="text-center mb-4 animate-fade-in">
                            
                            <h1 class="text-3xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-2">
                                Customer Registration
                            </h1>
                            <p class="text-gray-600">Please provide your details to complete the registration</p>
                        </div>
                
                        
                        <div class="glass-effect rounded-2xl shadow-2xl border border-white/20 p-8 animate-slide-up">
                            <form id="customerForm" class="space-y-6">
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="group">
                                        <label for="lsinumber" class="text-start block text-base font-semibold text-gray-700 mb-2 group-hover:text-blue-600 transition-colors">
                                            LSI Number <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <input 
                                                type="text" 
                                                id="lsinumber" 
                                                name="lsi" 
                                                required
                                                class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-0 transition-all duration-300 bg-white/50 hover:bg-white/80 placeholder-gray-400"
                                                placeholder="Enter LSI number"
                                            >
                                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="group">
                                        <label for="customerName" class="text-start block text-base font-semibold text-gray-700 mb-2 group-hover:text-blue-600 transition-colors">
                                            Customer Name <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <input 
                                                type="text" 
                                                id="customerName" 
                                                name="customername" 
                                                required
                                                class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-0 transition-all duration-300 bg-white/50 hover:bg-white/80 placeholder-gray-400"
                                                placeholder="Enter full name"
                                            >
                                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                
                                
                                <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 border border-blue-100">
                                    <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        </svg>
                                        Location Details
                                    </h3>
                                    
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div class="group">
                                            <label for="latitude" class="text-start block text-base font-semibold text-gray-700 mb-2 group-hover:text-blue-600 transition-colors">
                                                Latitude <span class="text-red-500">*</span>
                                            </label>
                                            <input 
                                                type="number" 
                                                id="latitude" 
                                                name="latitude" 
                                                step="any"
                                                required
                                                class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-0 transition-all duration-300 bg-white/50 hover:bg-white/80 placeholder-gray-400"
                                                placeholder="e.g. 28.6139"
                                            >
                                        </div>
                                        
                                        <div class="group">
                                            <label for="longitude" class="text-start block text-base font-semibold text-gray-700 mb-2 group-hover:text-blue-600 transition-colors">
                                                Longitude <span class="text-red-500">*</span>
                                            </label>
                                            <input 
                                                type="number" 
                                                id="longitude" 
                                                name="longitude" 
                                                step="any"
                                                required
                                                class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-0 transition-all duration-300 bg-white/50 hover:bg-white/80 placeholder-gray-400"
                                                placeholder="e.g. 77.2090"
                                            >
                                        </div>
                                    </div>
                                </div>
                
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="group">
                                        <label for="city" class="text-start block text-base font-semibold text-gray-700 mb-2 group-hover:text-blue-600 transition-colors">
                                            City <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <input 
                                                type="text" 
                                                id="city" 
                                                name="city" 
                                                required
                                                class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-0 transition-all duration-300 bg-white/50 hover:bg-white/80 placeholder-gray-400"
                                                placeholder="Enter city name"
                                            >
                                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="group">
                                        <label for="mobileNo" class="text-start block text-base font-semibold text-gray-700 mb-2 group-hover:text-blue-600 transition-colors">
                                            Mobile Number <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <input 
                                                type="tel" 
                                                id="mobileNo" 
                                                name="mobileNo" 
                                                required
                                                pattern="[0-9]{10}"
                                                maxlength="10"
                                                class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-0 transition-all duration-300 bg-white/50 hover:bg-white/80 placeholder-gray-400"
                                                placeholder="Enter 10-digit number"
                                            >
                                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <p class="text-xs text-gray-500 mt-2 flex items-center">
                                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                                            </svg>
                                            Please enter a valid 10-digit mobile number
                                        </p>
                                    </div>
                                </div>
                
                                
                                <div class="pt-6">
                                    <button 
                                        type="submit"
                                        class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-4 px-6 rounded-xl font-semibold text-xl shadow-lg hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-4 focus:ring-blue-300 transform hover:scale-[1.02] transition-all duration-300 active:scale-[0.98]"
                                    >
                                        <span class="flex items-center justify-center">
                                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            Submit Customer Details
                                        </span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

Related Examples

Dropdown select on hover
this example does not uses javascript

Alok

3 years ago

31.4k
Drop Down
This component is a Select Input Or Dropdown UI & Dark mode Supported Component

Shariar Hasan

2 years ago

7.1k
Dropdown select on hover
this example does not uses javascript

Thomas Taylor

2 years ago

3.2k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Maxim

1 year ago

7.1k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Anonymous

1 year ago

2.4k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Anonymous

1 year ago

1.7k
User List
List of users

Marcos Vinicios Nussemeyer

1 year ago

1.9k
Credit / Debit card payment information form

Santos78

3 years ago

20.8k
Tag Cloud
Display Trending Topics, Tags, etc.

Krishna Gudpalle

3 years ago

10.5k
Feedback form
Collect opinions about your company's service

Arya

4 years ago

14.7k
Login Template
its is a basic login template

Sergio Gonzalez

1 year ago

1.1k
contact us form
contact us form that uses the Free VeilMail EmailProtection Service too!

Geoffrey Callaghan

2 years ago

6.9k