![Cover image for 10+ Tailwind CSS Checkbox Examples [Open-Source & Free]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fskcxq5sx92z3d50upxyo.jpg)
Hello Tailwind fans 👋
I prepared a list of open-source checkbox components coded with Tailwind CSS and Material Tailwind.
Each Tailwind CSS checkbox example showcased below is easy to integrate and customize. The links to the source code are placed below each example.
Simply copy and paste the code directly into your application.
Happy coding!
Checkbox Component Examples
1. Colored Checkbox
This set of checkboxes shows a variety of color options, allowing you to apply distinct hues to the checkbox component. You can use them to represent different categories or statuses within the interface.
For example, in task management apps you can define different priority levels with colored checkboxes. Low priority tasks with blue checkbox, high priority ones with red, and completed tasks with green checkboxes.
Get the source code of this checkbox on different colors examples.
2. Checkbox with label
Use this example to provide context or instructions related to the checkbox's function, improving UX by clarifying the purpose of the selection.
Get the source code of this checkbox with label.
3. Checkbox with Ripple Effect
In this example, the ripple effect offers immediate visual feedback, making the interface more responsive and engaging.
Get the source code of this checkbox with ripple effect example.
4. Checkbox with Custom Icon
Use this example to align the checkbox with specific branding guidelines or thematic elements of the app.
Get the source code of this checkbox with custom icon example.
5. Disabled Checkbox
In this example, the checkbox is grayed out, indicating to users that the option is currently unavailable/inactive.
Get the source code of this disabled checkbox example.
6. Checkbox with Link
Use this example to allow users to agree with terms and conditions or other linked content directly from the checkbox component.
Get the source code of this checkbox with link example.
7. Checkbox with Description
This checkbox includes a supplementary description beneath the main label providing additional context or information about the checkbox's function.
Get the source code of this checkbox with description example.
8. Checkbox with Vertical List Group
Try this checkbox component example that allows users to select multiple items from a vertically stacked list.
Get the source code of this checkbox example.
9. Checkbox with Horizontal List Group
Use this example for compact UI designs where space efficiency is crucial.
Get the source code of this checkbox example.
10. Checkbox with Custom Style
This checkbox showcases custom styling.
Get the source code of this checkbox with custom style example.
🚀 Looking for even more examples?
Check out our open-source Tailwind CSS components library - Material Tailwind - and browse through 500+ components and website sections.
Top comments (2)
1 Simple Checkbox
Don't use a checkbox on its own! It's not minimal, it's missing a label. I mean, it has a label element as a wrapper, but there's no label content in it.
It doesn't behave like a checkbox. It uses a pointer cursor and overlays the native component with another.
tl;dr: if it were minimal, it'd be the native checkbox.
2 Colored Checkbox
Can you give me a use case for this? You say, "... to represent different categories or statuses" but I can't imagine what those could be. It's fine to colour something to match your theme, but if you're using the colour as a substitute for a label, or for some kind of third state, then I think there are bigger semantic problems with the UI.
3 Checkbox with label
This seems to have two
labelelements, in some kind of faux-semantic mess. I'm not even sure what it's trying to do.... actually, are these all straight copies of the Material Tailwind page?
If that's the case, I'll just note that a lot of them are the same thing - the "custom style one" is the same as the "simple" one, which also has a custom style; the "checkbox with link" one is the same as "with label" but the label contains a link (and a redundant paragraph)
4 Checkbox with Ripple Effect
This doesn't do anything different to the simple checkbox. There's no effect on it whatsoever. It uses nearly 40 lines of HTML to do what should take 2, and doesn't actually work!
As a side-note, a lot of the example on the material-tailwind site don't work for me - I can't uncheck some of them, for example, even by changing the
checkedattribute in the source.Thanks for your feedback! 🙌🏼