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