Home
Nomusa Botha
Multiple select input with alpine js

Multiple select input with alpine js

select input where you can select multiple items

This tailwind example is contributed by Nomusa Botha, on 18-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Select

Author Nomusa Botha

5.2k

Fork Fullscreen

<div class="max-w-md mx-auto mt-20" x-data="multiSelect()">
    <div class="relative">
        <label for="multi-select" class="block text-sm font-medium text-gray-700 mb-1">Select options:</label>
        <div class="mt-1 relative">
            <button type="button" @click="open = !open"
                class="relative w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                <span class="block truncate"
                    x-text="selectedOptions.length ? selectedOptions.join(', ') : 'Select options'"></span>
                <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
                    <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                        fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
                            clip-rule="evenodd" />
                    </svg>
                </span>
            </button>

Related Examples

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

Author:
Shariar Hasan

1 year ago

5.7k
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.

Author:
Anonymous

7 months ago

1.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.

Author:
SANJAY SINGH GARIYA

4 months ago

447
Select input

Author:
Sophia Baker

2 years ago

13.9k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

10 months ago

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

Author:
Alok

2 years ago

29.3k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.3k
User List
List of users

Author:
Marcos Vinicios Nussemeyer

5 months ago

1k
register
helps us to be learn easy

Author:
Nishimwe Jeanine

4 months ago

306
Dropdown select on hover
this example does not uses javascript

Author:
Thomas Taylor

1 year ago

2.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.

Author:
Anonymous

7 months ago

965
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.

Author:
Maxim

10 months ago

4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components