Component

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>

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>