DEV Community

Cover image for How to build a Tailwind CSS Select Dropdown component with Flowbite
Zoltán Szőgyényi for Themesberg

Posted on • Originally published at flowbite.com

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.

Tailwind CSS Select

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Finally, it should look something like this:

Tailwind CSS Select Dark mode

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>
Enter fullscreen mode Exit fullscreen mode

The result should look something like this:

Tailwind CSS Multiple Select

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

Tailwind CSS Underline select

Tailwind CSS Dropdown Select

Check out the following helpful links:

Discussion (0)