Tailwind CSS Select

Use our Tailwind CSS select component to collect user provided information from a list of options.

A select component is a dropdown menu for displaying choices. Use the radio component when there are fewer total options (less than 5).

See below our select component example that you can use in your Tailwind CSS project. The example comes in different colors and styles, so you can adapt it easily to your needs.


<div class="w-1/6">
  <select
    class="form-control"
    name="choice-button"
    id="choice-button"
    placeholder="Language"
  >
    <option defaultValue="Choice 1" selected>Brazil</option>
    <option defaultValue="Choice 2">Bucharest</option>
    <option defaultValue="Choice 3">London</option>
    <option defaultValue="Choice 4">Washington</option>
  </select>
</div>



You have to add the following initialization script to run this plugin:

if (document.getElementById("choice-search")) {
  var element = document.getElementById("choice-search");
  const example = new Choices(element, {
    searchEnabled: false,
  });
}

Select with Search

<div class="w-1/6">
  <select
    class="form-control"
    name="choice-search"
    id="choice-search"
    placeholder="Location"
  >
    <option defaultValue="Choice 1" selected>Brazil</option>
    <option defaultValue="Choice 2">Bucharest</option>
    <option defaultValue="Choice 3">London</option>
    <option defaultValue="Choice 4">Washington</option>
  </select>
</div>



You have to erase the searchEnabled: false from the init function - it will look like this:

if (document.getElementById("choice-button")) {
  var element = document.getElementById("choice-button");
  const example = new Choices(element, {});
}

Required Scrips

The select component needs some required script files to work, you just need to add the below script file to the bottom of your html file.

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html/scripts/select.js"></script>
 
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/select.js"></script>
 
<!-- choices.js cdn link -->
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
Edit this page on Github