How to build a Tailwind CSS Select Dropdown component with Flowbite

Tailwind CSS and Flowbite have been one of my favorite front-end stacks to work with when building a website mostly because of the speed of development, performance, and the fact that I never have to leave my HTML.

Flowbite is a component library built on top of Tailwind CSS including over 30+ interactive elements such as navbars, modals, dropdowns, tooltips, buttons, and more.

Tailwind CSS is the world's most popular utility-first CSS framework that helps you build websites faster and offers you the flexibility of designing elements and pages any way you like.

Today I want to show you how to build a select input component using the classes from Tailwind CSS and component examples from Flowbite.

Let's get started!

Tailwind CSS Select

First of all let's get started by building the semantic HTML by adding a select element with option tags within:



<label for="countries">Select an option</label>
<select id="countries">
  <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>

There is no styling yet so let's add some colors and sizes:



<label for="countries" class="block mb-2 text-sm font-medium text-gray-900">Select an option</label>
<select id="countries" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
  <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>

Looking better! Now let's also add some dark mode classes:



<label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Select an option</label>
<select id="countries" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
  <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>

Finally, it should look something like this:

Multiple options

You can easily allow multiple options by adding the multiple attribute to the select input:



<label for="countries_multiple" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Select an option</label>
<select multiple id="countries_multiple" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
  <option selected>Choose countries</option>
  <option value="US">United States</option>
  <option value="CA">Canada</option>
  <option value="FR">France</option>
  <option value="DE">Germany</option>
</select>

The result should look something like this:

Sizing

You can also use the following example for a smaller select input:



<label for="small" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Small select</label>
<select id="small" class="block p-2 mb-6 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
  <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>

And the following example for a larger select input:



<label for="large" class="block mb-2 text-base font-medium text-gray-900 dark:text-gray-400">Large select</label>
<select id="large" class="block py-3 px-4 w-full text-base text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
  <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>

These are just a few examples of the select input, but you can check out more Tailwind CSS Select components from Flowbite to get started building websites faster.

Here's a list of extra select components from Flowbite:

Check out the following helpful links:

Blog

How to build a Tailwind CSS Select Dropdown component with Flowbite

Zoltán Szőgyényi

Tailwind CSS Select

Multiple options

Sizing

Join Our Newsletter. No Spam, Only the good stuff.

Related