10+ Tailwind CSS Checkbox Examples [Open-Source & Free]

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.

Comments

[Ben Sinclair]

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 label elements, 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 checked attribute in the source.

[Creative Tim]

Thanks for your feedback! 🙌🏼