Default Select
A basic example of Tailwind CSS Select.
Label
Display a Tailwind CSS Select with an associated form input label element for better accessibility and user experience.
<div class="w-full">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-32">
Example Label
</label>
<select class="select" name="select">
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
</select>
</div>
</div>
Hint
Include hint text below a Tailwind CSS Select for an additional guidance or context for the input field.
Hint text goes here
<div class="w-full">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-32">
Example Label
</label>
<div class="flex flex-col w-full gap-1">
<select class="select" name="select">
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
</select>
<span class="text-xs text-gray-500">
Hint text goes here
</span>
</div>
</div>
</div>
Validation
Utilize Tailwind CSS Select validation states based on the form validation status to enhance user feedback and overall form usability.
<select class="select" name="select">
<option value="1">
Default
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
</select>
<select class="select border-danger" name="select">
<option value="1">
Danger
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
</select>
<select class="select border-success" name="select">
<option value="1">
Success
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
</select>
Disabled
Use the
disabled attribute of the Tailwind CSS Select to indicate non-interactivity.
Sizes
Use the
.select-sm and .select-lg
custom classes to adjust the size of Tailwind CSS Select fields, providing flexibility for different design requirements.
<select class="select select-sm" name="select">
<option value="1">
Small
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
</select>
<select class="select" name="select">
<option value="1">
Default
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
</select>
<select class="select select-lg" name="select">
<option value="1">
Large
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
</select>
Source Code
The following source file manages the CSS styles of the Tailwind CSS Select component.
Upon building the assets using Webpack Build Tools,
the below file is compiled and added into the
dist/assets/css/styles.css bundle,
making it available globally across all pages.
| File | Description |
|---|---|
src/core/plugins/components/select.js
|
The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Select component. |
