Tailwind CSS Select
In order to enable the user to select one or more alternatives from a dropdown list based on numerous styles, sizes, and variants, begin by implementing the tailwind select component.
Requires Pagedone CSS
This component requires the use of our Pagedone UI as a package, else you can skip this message if you are already using Pagedone UI as a package.
You may use the tailwind select component to collect user data in the form of a dropdown list with several alternatives. This page offers a variety of styles, sizes, and variants that are made using Tailwind CSS utility classes and can be viewed in dark mode.
Select input example
Start with the select tailwind component's default example to obtain a single choice selection.
<div class="block w-full">
<label for="countries" class="block mb-2 text-sm font-medium text-gray-600 w-full">Country</label>
<select id="countries" class="h-12 border border-gray-300 text-gray-600 text-base rounded-lg block w-full py-2.5 px-4 focus:outline-none">
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</div>Multiple options
Give users the opportunity to choose one or more alternatives by applying the multiple property to the tailwind multiple select component.
<div class="block w-full">
<label for="countries" class="block mb-2 text-sm font-medium text-gray-600 w-full">Country</label>
<select multiple id="countries" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-full py-2.5 px-4 focus:outline-none">
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Size attribute
To specify the number of visible options in the list, use the tailwind dropdown select component's size parameter.
<div class="block w-full">
<label for="countries" class="block mb-2 text-sm font-medium text-gray-600 w-full">Country</label>
<select multiple id="countries" size="3" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-full py-2.5 px-4 focus:outline-none">
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</div>Disabled state
To prevent the selection of further alternatives, apply the disable state to the choose component for that use below tailwind select dropdown.
<div class="block w-full">
<label for="countries_disabled" class="block mb-2 text-sm font-medium text-gray-600 w-full">Country</label>
<select disabled id="countries_disabled" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-full py-2.5 px-4 focus:outline-none">
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</div>Sizes
Start by using the choose component's small, default, and large sizes from the below tailwind css select dropdown.
<div class="block w-full mb-4">
<label for="small_select" class="block mb-2 text-sm font-medium text-gray-600 w-full">Small select</label>
<select id="small_select" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-full py-1.5 px-2 focus:outline-none">
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</div>
<div class="block w-full mb-4">
<label for="default_select" class="block mb-2 text-sm font-medium text-gray-600 w-full">Default select</label>
<select id="default_select_select" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-full p-2.5 focus:outline-none">
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</div>
<div class="block w-full">
<label for="large_select" class="block mb-2 text-sm font-medium text-gray-600 w-full">Large select</label>
<select id="large_select" class="h-auto border border-gray-300 text-gray-600 text-base rounded-lg block w-full px-4 py-3 focus:outline-none">
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More