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 v3.4. It is responsive.

Select

Author Nomusa Botha

Tailwind v3.4 7k 3

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

canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.2k
canvas fully covers
canvas fully covers

Balogun David Olajuwon

1 year ago

1.3k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Mehmet Kaplan

2 years ago

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

Thomas Taylor

2 years ago

3.4k
register
helps us to be learn easy

Nishimwe Jeanine

1 year ago

1.1k
Search bar with filter options

Piet Vriend

3 years ago

26.5k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Rafferty Kim

3 years ago

10.9k
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.8k
Drop Down
This component is a Select Input Or Dropdown UI & Dark mode Supported Component

Shariar Hasan

2 years ago

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

ABDESLAMI ACHRAF

2 years ago

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

Alok

3 years ago

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

Maxim

1 year ago

7.3k