Select
Select fields allow users to select an option from a list.
Basic
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<div class="w-full space-y-0.5">
<label for="basic" class="text-xs font-medium text-slate-500">Select the best fruit</label>
<select id="basic" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 truncate undefined border-slate-300">
<option selected="">Oranges</option>
<option>Apples</option>
<option>Tomato</option>
</select>
</div>
Disabled
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<div class="w-full space-y-0.5">
<label for="disabled" class="text-xs font-medium text-slate-500">Select the best fruit</label>
<select id="disabled" disabled="" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 truncate undefined border-slate-300">
<option selected="">Oranges</option>
<option>Apples</option>
<option>Tomato</option>
</select>
</div>
Error
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<div class="w-full space-y-0.5">
<label for="error" class="text-xs font-medium text-slate-500">Select the best fruit</label>
<select id="error" class="block w-full rounded-md text-sm transition placeholder:text-slate-400 focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 truncate undefined border-red-600 ring-1 ring-red-600">
<option selected="">Oranges</option>
<option>Apples</option>
<option>Tomato</option>
</select>
<p class="pt-1 text-xs font-medium text-red-600">Sorry, we don't consider that as a fruit</p>
</div>
Sorry, we don't consider that as a fruit