Default Switch
A basic example of Tailwind CSS Switch component.
Label
Enhance the Tailwind CSS Switch by accompanying it with a label element, ensuring clear and accessible indication of its binary states.
Reverse
An example of using a reversed label element with the Tailwind CSS Switch component, demonstrating how to position the label element on the opposite side of the switch.
Tooltip
Utilize the
Tailwind CSS Tooltip
to integrate hint text into Tailwind CSS Switch, providing a well-guided form experience.
Hey, a delightful tooltip is here!
<label class="switch">
<input checked="" class="order-2" name="check" type="checkbox" value="1"/>
<span class="switch-label flex items-center gap-2 order-1">
Example Label
<span data-tooltip="#my_tooltip">
<i class="ki-outline ki-information-5 text-warning text-lg">
</i>
</span>
</span>
</label>
<div class="tooltip" id="my_tooltip">
Hey, a delightful tooltip is here!
</div>
Checked
Set the
checked
attribute for the Tailwind CSS Switch to initialize it with a predefined value.
Disabled
Use the
disabled
attribute of the Tailwind CSS Switch to indicate non-interactivity, showing users that the switch cannot be toggled.
<label class="switch">
<input class="order-2" disabled="" name="check" type="checkbox" value="1"/>
<span class="switch-label order-1">
Default state
</span>
</label>
<label class="switch">
<input checked="" class="order-2" disabled="" name="check" type="checkbox" value="1"/>
<span class="switch-label order-1">
Checked state
</span>
</label>
Sizes
Use the
.switch-sm
and
.switch-lg
custom classes to adjust the size of Tailwind CSS Switch, providing flexibility for different design requirements.
<label class="switch switch-sm">
<input class="order-1" name="check" type="checkbox" value="1"/>
<span class="switch-label order-2">
Small
</span>
</label>
<label class="switch">
<input class="order-1" name="check" type="checkbox" value="1"/>
<span class="switch-label order-2">
Default
</span>
</label>
<label class="switch switch-lg">
<input class="order-1" name="check" type="checkbox" value="1"/>
<span class="switch-label order-2">
Large
</span>
</label>
Source Code
The following source file manages the CSS styles of the Tailwind CSS Switch 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/switch.js
|
The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Switch component. |