How to build a Tailwind CSS Select Dropdown component with Flowbite

Tailwind CSS and Flowbite have been one in all my favourite front-end stacks to work with when constructing a web site largely due to the velocity of growth, efficiency, and the truth that I by no means have to go away my HTML.

Flowbite is a part library constructed on prime of Tailwind CSS together with over 30+ interactive parts resembling navbars, modals, dropdowns, tooltips, buttons, and extra.

Tailwind CSS is the world’s hottest utility-first CSS framework that helps you construct web sites quicker and affords you the flexibleness of designing parts and pages any means you want.

Right now I need to present you the way to construct a choose enter part utilizing the courses from Tailwind CSS and part examples from Flowbite.

Let’s get began!



Tailwind CSS Choose

To begin with let’s get began by constructing the semantic HTML by including a choose factor with choice tags inside:

<label for="international locations">Choose an choice</label>
<choose id="international locations">
  <choice chosen>Select a rustic</choice>
  <choice worth="US">United States</choice>
  <choice worth="CA">Canada</choice>
  <choice worth="FR">France</choice>
  <choice worth="DE">Germany</choice>
</choose>
Enter fullscreen mode

Exit fullscreen mode

There isn’t any styling but so let’s add some colours and sizes:

<label for="international locations" class="block mb-2 text-sm font-medium text-gray-900">Choose an choice</label>
<choose id="international locations" 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">
  <choice chosen>Select a rustic</choice>
  <choice worth="US">United States</choice>
  <choice worth="CA">Canada</choice>
  <choice worth="FR">France</choice>
  <choice worth="DE">Germany</choice>
</choose>
Enter fullscreen mode

Exit fullscreen mode

Trying higher! Now let’s additionally add some darkish mode courses:

<label for="international locations" class="block mb-2 text-sm font-medium text-gray-900 darkish:text-gray-400">Choose an choice</label>
<choose id="international locations" 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 darkish:bg-gray-700 darkish:border-gray-600 darkish:placeholder-gray-400 darkish:text-white darkish:focus:ring-blue-500 darkish:focus:border-blue-500">
  <choice chosen>Select a rustic</choice>
  <choice worth="US">United States</choice>
  <choice worth="CA">Canada</choice>
  <choice worth="FR">France</choice>
  <choice worth="DE">Germany</choice>
</choose>
Enter fullscreen mode

Exit fullscreen mode

Lastly, it ought to look one thing like this:

Tailwind CSS Select Dark mode



A number of choices

You possibly can simply permit a number of choices by including the a number of attribute to the choose enter:

<label for="countries_multiple" class="block mb-2 text-sm font-medium text-gray-900 darkish:text-gray-400">Choose an choice</label>
<choose a number of 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 darkish:bg-gray-700 darkish:border-gray-600 darkish:placeholder-gray-400 darkish:text-white darkish:focus:ring-blue-500 darkish:focus:border-blue-500">
  <choice chosen>Select international locations</choice>
  <choice worth="US">United States</choice>
  <choice worth="CA">Canada</choice>
  <choice worth="FR">France</choice>
  <choice worth="DE">Germany</choice>
</choose>
Enter fullscreen mode

Exit fullscreen mode

The consequence ought to look one thing like this:

Tailwind CSS Multiple Select



Sizing

You may as well use the next instance for a smaller choose enter:

<label for="small" class="block mb-2 text-sm font-medium text-gray-900 darkish:text-gray-400">Small choose</label>
<choose 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 darkish:bg-gray-700 darkish:border-gray-600 darkish:placeholder-gray-400 darkish:text-white darkish:focus:ring-blue-500 darkish:focus:border-blue-500">
  <choice chosen>Select a rustic</choice>
  <choice worth="US">United States</choice>
  <choice worth="CA">Canada</choice>
  <choice worth="FR">France</choice>
  <choice worth="DE">Germany</choice>
</choose>
Enter fullscreen mode

Exit fullscreen mode

And the next instance for a bigger choose enter:

<label for="giant" class="block mb-2 text-base font-medium text-gray-900 darkish:text-gray-400">Massive choose</label>
<choose id="giant" 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 darkish:bg-gray-700 darkish:border-gray-600 darkish:placeholder-gray-400 darkish:text-white darkish:focus:ring-blue-500 darkish:focus:border-blue-500">
  <choice chosen>Select a rustic</choice>
  <choice worth="US">United States</choice>
  <choice worth="CA">Canada</choice>
  <choice worth="FR">France</choice>
  <choice worth="DE">Germany</choice>
</choose>
Enter fullscreen mode

Exit fullscreen mode

These are just some examples of the choose enter, however you may try extra Tailwind CSS Select elements from Flowbite to get began constructing web sites quicker.

Here is a listing of additional choose elements from Flowbite:

Tailwind CSS Underline select

Tailwind CSS Dropdown Select

Take a look at the next useful hyperlinks:

Add a Comment

Your email address will not be published. Required fields are marked *