forms
Tailwind CSS Select
A select element is utilized to choose a value from a range of options.
Class Name | Type | Description |
|---|---|---|
| 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 select example.
<select class="select max-w-sm appearance-none" aria-label="select">
<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="w-96">
<label class="label label-text" 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>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" aria-label="Select floating label" id="selectFloating">
<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 class="select-floating-label" for="selectFloating">Pick your favorite Movie</label>
</div>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" aria-label="Filled select" id="selectFilled">
<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>
<label class="select-filled-label" for="selectFilled">Pick your favorite Movie</label>
</div>Default select has 4 size default, small and large.
<select class="select select-xs max-w-sm" aria-label="select">
<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" aria-label="select">
<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" aria-label="select">
<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" aria-label="select">
<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 select has 3 sizes example.
<div class="relative max-w-sm">
<select class="select select-sm select-floating" id="selectFloatingSmall" aria-label="floating label">
<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 class="select-floating-label" for="selectFloatingSmall">Pick your favorite Movie</label>
</div>
<div class="relative max-w-sm">
<select class="select select-floating" id="selectFloatingDefault" aria-label="floating label">
<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 class="select-floating-label" for="selectFloatingDefault">Pick your favorite Movie</label>
</div>
<div class="relative max-w-sm">
<select class="select select-lg select-floating" id="selectFloatingLarge" aria-label="floating label">
<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 class="select-floating-label" for="selectFloatingLarge">Pick your favorite Movie</label>
</div>Filled select has 3 sizes example.
<div class="relative max-w-sm">
<select class="select select-sm select-filled" id="selectFilledSmall" aria-label="Filled 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>
<span class="select-filled-focused"></span>
<label class="select-filled-label" for="selectFilledSmall">Pick your favorite Movie</label>
</div>
<div class="relative max-w-sm">
<select class="select select-filled" id="selectFilledDefault" aria-label="Filled 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>
<span class="select-filled-focused"></span>
<label class="select-filled-label" for="selectFilledDefault">Pick your favorite Movie</label>
</div>
<div class="relative max-w-sm">
<select class="select select-lg select-filled" id="selectFilledLarge" aria-label="Filled 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>
<span class="select-filled-focused"></span>
<label class="select-filled-label" for="selectFilledLarge">Pick your favorite Movie</label>
</div>Success state which can be added by using class is-valid.
Bottom Left label
Bottom Right label
Top Right label
Bottom Left label
Bottom Right label
Top Right label
Bottom Left label
Bottom Right label
<div class="max-w-sm">
<label class="label label-text" for="selectStateSuccessDefault"> Full Name </label>
<select class="select is-valid" id="selectStateSuccessDefault">
<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>
</div>
<div class="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" id="selectStateSuccessFloating">
<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 class="select-floating-label" for="selectStateSuccessFloating">Pick your favorite Movie</label>
</div>
<div class="label">
<span class="label-text-alt">Bottom Left label</span>
<span class="label-text-alt">Bottom Right label</span>
</div>
</div>
<div class="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" id="selectStateSuccessFilled">
<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>
<label class="select-filled-label" for="selectStateSuccessFilled">Pick your favorite Movie</label>
</div>
<div class="label">
<span class="label-text-alt">Bottom Left label</span>
<span class="label-text-alt">Bottom Right label</span>
</div>
</div>Error state can be added using class is-invalid.
Bottom Left label
Bottom Right label
Top Right label
Bottom Left label
Bottom Right label
Top Right label
Bottom Left label
Bottom Right label
<div class="max-w-sm">
<label class="label label-text" for="selectStateErrorDefault"> Full Name </label>
<select class="select is-invalid" id="selectStateErrorDefault">
<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>
</div>
<div class="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" id="selectStateErrorFloating">
<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 class="select-floating-label" for="selectStateErrorFloating">Pick your favorite Movie</label>
</div>
<div class="label">
<span class="label-text-alt">Bottom Left label</span>
<span class="label-text-alt">Bottom Right label</span>
</div>
</div>
<div class="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" id="selectStateErrorFilled">
<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>
<label class="select-filled-label" for="selectStateErrorFilled">Pick your favorite Movie</label>
</div>
<div class="label">
<span class="label-text-alt">Bottom Left label</span>
<span class="label-text-alt">Bottom Right label</span>
</div>
</div>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" aria-label="Pilled select">
<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" id="selectFloatingPilled" aria-label="Pilled 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 class="select-floating-label" for="selectFloatingPilled">Pick your favorite Movie</label>
</div>
<div class="relative max-w-sm">
<select class="select select-filled rounded-full" id="selectFilledPilled" aria-label="Pilled 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 class="select-filled-label rounded-full" for="selectFilledPilled">Pick your favorite Movie</label>
</div>Use the label class along with label-text for the main label and label-text-alt for helper text, applying styling through Tailwind CSS classes.
Sub label
Sub label
<div class="w-96">
<label class="label label-text" for="selectHelperText"> Pick your favorite Movie </label>
<select class="select" id="selectHelperText">
<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>
</div>label elements hidden using the .sr-only class.
Pick your favorite Movie
<div class="w-96">
<div class="label label-text sr-only" for="selectHiddenLabel"> Pick your favorite Movie </div>
<select class="select" id="selectHiddenLabel">
<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>Disable a select element by adding the disabled attribute, making it non-selectable.
<select class="select disabled w-96" aria-label="Disabled select">
<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" id="selectDisabledFloating" aria-label="Disabled 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 class="select-floating-label" for="selectDisabledFloating">Pick your favorite Movie</label>
</div>
<div class="relative max-w-sm">
<select class="select disabled select-filled" id="selectDisabledFilled" aria-label="Disabled 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>
<span class="select-filled-focused"></span>
<label class="select-filled-label" for="selectDisabledFilled">Pick your favorite Movie</label>
</div>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="flex flex-col">
<label for="exampleDataList" class="label label-text">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>Enable the selection of multiple options in a select element by adding the multiple attribute.
<div>
<label class="label label-text" 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>Utilize the optgroup element to group option elements together within a select dropdown, creating organized sections.
<div class="w-96">
<label class="label label-text" 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>
