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. |