How to build a Tailwind CSS Select Dropdown component with Flowbite
Tags: tailwindcss, opensource, webdev, tutorial
Published: 2022-05-13 14:04:55

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](https://flowbite.com) 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](https://tailwindcss.com) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdw3ul218hvff77nv6oa.png)](https://flowbite.com/docs/forms/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>
```

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:

[![Tailwind CSS Select Dark mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gi8zj4lna0th3ckilqmz.png)](https://flowbite.com/docs/forms/select/)

## 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:

[![Tailwind CSS Multiple Select](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sup3kls36vseibh3u59m.png)](https://flowbite.com/docs/forms/select/#multiple-options)

## 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](https://flowbite.com/docs/forms/select/) components from Flowbite to get started building websites faster.

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

[![Tailwind CSS Underline select](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ty5yisfquifrlnr06cq8.png)](https://flowbite.com/docs/forms/select/#underline-select)

[![Tailwind CSS Dropdown Select](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6u8baekt8lzaqin2nnos.png)](https://flowbite.com/docs/forms/select/#select-with-dropdown)

Check out the following helpful links:

- [Tailwind CSS Select - Flowbite](https://flowbite.com/docs/forms/select/)
- [Flowbite - Tailwind CSS Components](https://flowbite.com/docs/getting-started/introduction/)