Default Checkbox
A basic example of Tailwind CSS Checkbox component.
<div class="flex flex-col items-start gap-4">
<label class="form-label flex items-center gap-2.5">
<input class="checkbox" name="check" type="checkbox" value="1"/>
Default checkbox
</label>
<label class="form-label flex items-center gap-2.5">
<input checked="" class="checkbox" name="check" type="checkbox" value="1"/>
Checked checkbox
</label>
</div>
Inline
An example to display Tailwind CSS Checkbox components in an inline layout,
demonstrating how to align multiple checkboxes horizontally for a clean and organized presentation.
<div class="flex gap-12">
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input class="checkbox" name="check" type="checkbox" value="1"/>
Default checkbox
</label>
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input checked="" class="checkbox" name="check" type="checkbox" value="1"/>
Checked checkbox
</label>
</div>
Indeterminate
Programmatically set the indeterminate state of a Tailwind CSS Checkbox to indicate a mixed selection state.
This feature is useful for parent checkboxes that represent the selection state of multiple child checkboxes.
<div class="flex flex-col items-start gap-4">
<label class="form-label flex items-center gap-2.5">
<input class="checkbox" id="my_checkbox" name="check" type="checkbox" value="1"/>
Indeterminate state
</label>
</div>
const checkboxEl = document.querySelector('#my_checkbox');
checkboxEl.indeterminate = true;
Disabled
Use the
disabled
attribute of the Tailwind CSS Checkbox to indicate non-interactivity, showing users that the checkbox cannot be toggled.
Sizes
Use the
.checkbox-sm
and
.checkbox-lg
custom classes to adjust the size of Tailwind CSS Checkbox, providing flexibility for different design requirements.
<div class="flex flex-col items-start gap-4">
<label class="form-label flex items-center gap-2.5">
<input class="checkbox checkbox-sm" name="check" type="checkbox" value="1"/>
Small
</label>
<label class="form-label flex items-center gap-2.5">
<input class="checkbox" name="check" type="checkbox" value="2"/>
Default
</label>
<label class="form-label flex items-center gap-2.5">
<input class="checkbox checkbox-lg" name="check" type="checkbox" value="3"/>
Large
</label>
</div>
Source Code
The following source file manages the CSS styles of the Tailwind CSS Checkbox 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/checkbox.js
|
The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Checkbox component. |