Tailwind CSS Checkbox
Build Tailwind CSS checkbox components with indeterminate, disabled, grouped, card, list group, right-aligned, horizontal, and validation states.
Heads up!
By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it!
Default checkbox
Use a standard checkbox for single selections with checked and unchecked states.
Indeterminate
Apply the :indeterminate state with JavaScript when a checkbox needs to reflect a partial selection.
The @tailwindcss/forms plugin does not natively support the indeterminate state for checkboxes. However, you can implement this functionality with custom CSS.
You can add custom styles for the indeterminate state in your tailwind.config.js file as shown below:
tailwind.config.js:
module.exports = {
theme: {
extend: {
customForms: theme => ({
default: {
checkbox: {
'&:indeterminate': {
background: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 16 16\' fill=\'white\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'8\' height=\'2\' x=\'4\' y=\'7\' rx=\'1\'/%3E%3C/svg%3E");',
borderColor: 'transparent',
backgroundColor: 'currentColor',
backgroundSize: '100% 100%',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
}
}
}
})
},
},
plugins: [
require('@tailwindcss/forms'),
],
}
JavaScript code example:
Checkbox group options
Group related checkboxes together when users can select multiple options from the same set.
Checkboxes with descriptions
Pair each checkbox with supporting text to add more context to every option.
Checkbox cards
Wrap checkboxes inside bordered cards to create larger, easier-to-scan selection areas in a grid.
Vertical checkbox cards
Stack checkbox cards vertically when each option needs more breathing room in a narrow layout.
Right-aligned checkbox
Move the checkbox control to the right when the label content should lead visually.
Checkbox list group
Combine checkboxes with list group items to build selectable lists with consistent borders and spacing.
Horizontal checkbox list group
Use the same list group pattern in a horizontal layout for compact multi-select rows.
Validation states
Show valid and invalid states to give clear feedback when a checkbox is required in a form.