In this section we will create tailwind multi select dropdown ui, tailwind select2, tailwind v3 multi select dropdown with form plugin example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Example 1
Simple tailwind v3 dropdown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind Multiselect</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<label class="block text-gray-600" for="Multiselect">Multiselect</label>
<div class="relative flex w-full">
<select
class="block w-full p-3 border border-gray-300 rounded-sm cursor-pointer focus:outline-none"
multiple>
<option value="1">super admin</option>
<option value="2">admin</option>
<option value="3">writer</option>
<option value="4">user</option>
</select>
</div>
</div>
</body>
</html>
Tailwind Multiselect
Example 2
Tailwind multi select with first party form plugin. you need to setup tailwind form plugin.
form plugin cdn
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected]/css/custom-forms.css">
Or use tailwind v3 with plugin cdn
<script src="https://cdn.tailwindcss.com/?plugins=forms"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind Multiselect with form plugin</title>
<!-- tailwind v3 with form plugin -->
<script src="https://cdn.tailwindcss.com/?plugins=forms"></script>
</head>
<div class="w-1/3">
<label class="block">
<span class="text-gray-700">Select (multiple)</span>
<select class="block w-full mt-1 form-multiselect" multiple="">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</label>
</div>
</body>
</html>
Tailwindv3 Multiselect with form plugin
Example 3
tailwind select2 with tom-select.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind Multiselect with tom-select</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css"
rel="stylesheet"
/>
</head>
<div class="w-1/3">
<label class="inline-block text-sm text-gray-600" for="Multiselect"
>Select multiple roles</label
>
<div class="relative flex w-full">
<select
id="select-role"
name="roles[]"
multiple
placeholder="Select roles..."
autocomplete="off"
class="block w-full rounded-sm cursor-pointer focus:outline-none"
multiple
>
<option value="1">super admin</option>
<option value="2">admin</option>
<option value="3">writer</option>
<option value="4">user</option>
</select>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
<script>
new TomSelect('#select-role', {
maxItems: 3,
});
</script>
</body>
</html>
tailwind select2
Example 4
Tailwind CSS with AlpineJS multi select dropdown with Check Box.
<div x-data="{ open: false, selectedOptions: [] }" class="max-w-md mx-auto">
<div class="relative inline-block">
<button @click="open = !open" class="bg-white text-gray-500 px-4 py-2 rounded-md">
Select Options
</button>
<div x-show="open" @click.away="open = false"
class="mt-2 w-full bg-white border border-gray-300 rounded-md shadow-lg">
<template x-for="option in ['Option 1', 'Option 2', 'Option 3']" :key="option">
<label :for="option" class="block p-3 hover:bg-gray-100">
<input type="checkbox" x-model="selectedOptions" :value="option" :id="option" class="mr-2">
<span x-text="option" class="text-gray-700"></span>
</label>
</template>
</div>
</div>
<div class="mt-4">
<p class="font-semibold text-lg">Selected Options:</p>
<ul class="list-disc pl-6">
<template x-for="option in selectedOptions" :key="option">
<li x-text="option" class="text-gray-700"></li>
</template>
</ul>
</div>
</div>
tailwind css select multiple check box with alpinejs
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
