DEV Community

Cover image for 10+ Tailwind CSS Checkbox Examples [Open-Source & Free]
Creative Tim
Creative Tim

Posted on

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.

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

checkbox with label
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.

checkbox with ripple effect
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.

checkbox with custom icon
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.

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

checkbox with link
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.

checkbox with description
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.

checkbox vertical list group
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.

checkbox horizontal list group
Get the source code of this checkbox example.

10. Checkbox with Custom Style

This checkbox showcases custom styling.

checkbox with custom style
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)

Collapse
 
moopet profile image
Ben Sinclair • Edited

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.

Collapse
 
creativetim_official profile image
Creative Tim

Thanks for your feedback! πŸ™ŒπŸΌ