Tailwind CSS Select

Class Name	Type	Description
form-control	Component	Container element.
label	Component	For helper text.
select	Component	Basic select field.
select-floating	Component	Floating select field.
select-filled	Component	Select with background color and floating label.
select-floating-label	Component	Floats the label to the top.
select-filled-label	Component	Keeps the label at the top.
select-filled-focused	Component	Adds animation to the bottom border of a floating filled select.
select-xs	Responsive	Smaller select size.
select-sm	Responsive	Smaller select size.
select-lg	Responsive	Larger select size.
is-valid	Modifier	Adds success style to the input.
is-invalid	Modifier	Adds error style to the input.

Basic example

Default

Basic select example.

<select class="select max-w-sm appearance-none">
  <option disabled selected>Pick your favorite Movie</option>
  <option>The Godfather</option>
  <option>The Shawshank Redemption</option>
  <option>Pulp Fiction</option>
  <option>The Dark Knight</option>
  <option>Schindler's List</option>
</select>

The <select> element’s customization options are primarily confined to its initial appearance. Due to browser constraints, modifications to the appearance of <option> elements within the dropdown are not possible.

<div class="form-control w-96">
  <label class="label" for="favorite-simpson">Pick your favorite Movie</label>
  <select class="select" id="favorite-simpson">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
</div>

Floating label

The label remains in its floated position at all times, unlike with input elements. Pair select-floating with your select element and select-floating-label for the label.

<div class="relative w-full">
  <select class="select select-floating max-w-sm">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <span class="select-floating-label">Pick your favorite Movie</span>
</div>

Filled select

Apply the select-filled class to give your select element a background, and use select-filled-label for the label that will float above the text.

<div class="relative w-full max-w-sm">
  <select class="select select-filled max-w-sm">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <span class="select-filled-focused"></span>
  <span class="select-filled-label">Pick your favorite Movie</span>
</div>

Size

Default

Default select has 4 size default, small and large.

<select class="select select-xs max-w-sm">
  <option disabled selected>Pick your favorite Movie</option>
  <option>The Godfather</option>
  <option>The Shawshank Redemption</option>
  <option>Pulp Fiction</option>
  <option>The Dark Knight</option>
  <option>Schindler's List</option>
</select>

<select class="select select-sm max-w-sm">
  <option disabled selected>Pick your favorite Movie</option>
  <option>The Godfather</option>
  <option>The Shawshank Redemption</option>
  <option>Pulp Fiction</option>
  <option>The Dark Knight</option>
  <option>Schindler's List</option>
</select>

<select class="select max-w-sm">
  <option disabled selected>Pick your favorite Movie</option>
  <option>The Godfather</option>
  <option>The Shawshank Redemption</option>
  <option>Pulp Fiction</option>
  <option>The Dark Knight</option>
  <option>Schindler's List</option>
</select>

<select class="select select-lg max-w-sm">
  <option disabled selected>Pick your favorite Movie</option>
  <option>The Godfather</option>
  <option>The Shawshank Redemption</option>
  <option>Pulp Fiction</option>
  <option>The Dark Knight</option>
  <option>Schindler's List</option>
</select>

Floating label

Floating select has 3 sizes example.

<div class="relative max-w-sm">
  <select class="select select-sm  select-floating">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <span class="select-floating-label">Pick your favorite Movie</span>
</div>

<div class="relative max-w-sm">
  <select class="select select-floating">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <span class="select-floating-label">Pick your favorite Movie</span>
</div>

<div class="relative max-w-sm">
  <select class="select select-lg select-floating">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <span class="select-floating-label">Pick your favorite Movie</span>
</div>

Filled select

Filled select has 3 sizes example.

<div class="relative max-w-sm">
  <select class="select select-sm select-filled">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <span class="select-filled-focused"></span>
  <span class="select-filled-label">Pick your favorite Movie</span>
</div>

<div class="relative max-w-sm">
  <select class="select select-filled">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <span class="select-filled-focused"></span>
  <span class="select-filled-label">Pick your favorite Movie</span>
</div>

<div class="relative max-w-sm">
  <select class="select select-lg select-filled">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <span class="select-filled-focused"></span>
  <span class="select-filled-label">Pick your favorite Movie</span>
</div>

Validation states

Success state

Success state which can be added by using class is-valid.

<label class="form-control max-w-sm">
  <div class="label">
    <span class="label-text">Full Name</span>
    <span class="label-text-alt">Top Right label</span>
  </div>
  <select class="select is-valid">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<label class="form-control max-w-sm">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="relative">
    <select class="select is-valid select-floating">
      <option>The Godfather</option>
      <option>The Shawshank Redemption</option>
      <option>Pulp Fiction</option>
      <option>The Dark Knight</option>
      <option>Schindler's List</option>
    </select>
    <span class="select-floating-label">Pick your favorite Movie</span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<label class="form-control max-w-sm">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="relative">
    <select class="select is-valid select-filled">
      <option>The Godfather</option>
      <option>The Shawshank Redemption</option>
      <option>Pulp Fiction</option>
      <option>The Dark Knight</option>
      <option>Schindler's List</option>
    </select>
    <span class="select-filled-focused"></span>
    <span class="select-filled-label">Pick your favorite Movie</span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

Error state

Error state can be added using class is-invalid.

<label class="form-control max-w-sm">
  <div class="label">
    <span class="label-text">Full Name</span>
    <span class="label-text-alt">Top Right label</span>
  </div>
  <select class="select is-invalid">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<label class="form-control max-w-sm">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="relative">
    <select class="select is-invalid select-floating">
      <option>The Godfather</option>
      <option>The Shawshank Redemption</option>
      <option>Pulp Fiction</option>
      <option>The Dark Knight</option>
      <option>Schindler's List</option>
    </select>
    <span class="select-floating-label">Pick your favorite Movie</span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<label class="form-control max-w-sm">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="relative">
    <select class="select is-invalid select-filled">
      <option>The Godfather</option>
      <option>The Shawshank Redemption</option>
      <option>Pulp Fiction</option>
      <option>The Dark Knight</option>
      <option>Schindler's List</option>
    </select>
    <span class="select-filled-focused"></span>
    <span class="select-filled-label">Pick your favorite Movie</span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

Shape

Pilled select

Use the rounded-full utility class to make select’s circular. The default shape of the select but can be altered by using TailwindCSS Border Radius.

<select class="select max-w-72 max-w-sm rounded-full">
  <option disabled selected>Pick your favorite Movie</option>
  <option>The Godfather</option>
  <option>The Shawshank Redemption</option>
  <option>Pulp Fiction</option>
  <option>The Dark Knight</option>
  <option>Schindler's List</option>
</select>

<div class="relative">
  <select class="select select-floating max-w-sm rounded-full">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <span class="select-floating-label">Pick your favorite Movie</span>
</div>

<div class="relative max-w-sm">
  <select class="select select-filled rounded-full">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <span class="select-filled-label rounded-full">Pick your favorite Movie</span>
</div>

Illustrations

Label and helper text

The form-control acts as a wrapper for the label and the select elements. Inside this wrapper, the label class is styled in two ways: label-text is used for the select’s label, and label-text-alt is for the additional helper text.

<label class="form-control w-96">
  <div class="label">
    <span class="label-text">Pick your favorite Movie</span>
    <span class="label-text-alt">Sub label</span>
  </div>
  <select class="select">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <div class="label">
    <span class="label-text-alt">Sub label</span>
    <span class="label-text-alt">Sub label</span>
  </div>
</label>

Hidden label

label elements hidden using the .sr-only class.

<label class="form-control w-96">
  <div class="label sr-only">
    <span class="label-text">Pick your favorite Movie</span>
  </div>
  <select class="select">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
</label>

Disabled

Disable a select element by adding the disabled attribute, making it non-selectable.

<select class="select disabled w-96">
  <option disabled selected>Pick your favorite Movie</option>
  <option>The Godfather</option>
  <option>The Shawshank Redemption</option>
  <option>Pulp Fiction</option>
  <option>The Dark Knight</option>
  <option>Schindler's List</option>
</select>

<div class="relative max-w-sm">
  <select class="select disabled select-floating">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <span class="select-floating-label">Pick your favorite Movie</span>
</div>

<div class="relative max-w-sm">
  <select class="select disabled select-filled">
    <option>The Godfather</option>
    <option>The Shawshank Redemption</option>
    <option>Pulp Fiction</option>
    <option>The Dark Knight</option>
    <option>Schindler's List</option>
  </select>
  <span class="select-filled-focused"></span>
  <span class="select-filled-label">Pick your favorite Movie</span>
</div>

Datalist

Associate a datalist element with an input to provide a list of suggested options, allowing users to select from predefined choices or enter a custom value.

<div class="form-control flex flex-col">
  <label for="exampleDataList" class="form-label">Datalist example</label>
  <input class="input max-w-sm" list="datalistOptions" id="exampleDataList" placeholder="Type to search..." />
  <datalist id="datalistOptions">
    <option value="San Francisco"></option>
    <option value="New York"></option>
    <option value="Seattle"></option>
    <option value="Los Angeles"></option>
    <option value="Chicago"></option>
  </datalist>
</div>

Multiple

Enable the selection of multiple options in a select element by adding the multiple attribute.

<div class="form-control">
<label class="label" for="fav-movies">Pick your favorite Movies:</label>
<select multiple class="select rounded-md" name="fav-movies" id="fav-movies">
  <option>The Godfather</option>
  <option>The Shawshank Redemption</option>
  <option>Pulp Fiction</option>
  <option>The Dark Knight</option>
  <option>Schindler's List</option>
</select>
</div>

Optgroup

Utilize the optgroup element to group option elements together within a select dropdown, creating organized sections.

<div class="form-control w-96">
  <label class="label" for="technologies">Choose a technology:</label>
  <select class="select max-w-sm" name="technologies" id="technologies">
    <optgroup label="Frontend Technologies">
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="javascript">JavaScript</option>
    </optgroup>
    <optgroup label="Backend Technologies">
      <option value="nodejs">Node.js</option>
      <option value="python">Python</option>
      <option value="java">Java</option>
    </optgroup>
  </select>
</div>

FlyonUI

Tailwind CSS Select

Basic example

Default

Type

Default

Floating label

Filled select

Size

Default

Floating label

Filled select

Validation states

Success state

Error state

Shape

Pilled select

Illustrations

Label and helper text

Hidden label

Disabled

Datalist

Multiple

Optgroup

On this page

Select