Tailwind CSS Checkbox

Get started on your web projects with our Tailwind CSS checkbox which is an input control that allows the user to select one or more items from a set. You can use a checkbox for:

• Selecting one or more options from a list
• Presenting a list containing sub-selections
• Turning an item on/off in a desktop environment (If you have a single option, avoid using a checkbox and use an on/off checkbox instead)

See below our easy-to-use checkbox component that you can use for your Tailwind CSS project.

Checkbox Colors

Checkbox with Label

Checkbox Ripple Effect

Required Scrips

The checkbox component needs a required script file for ripple effect to work, you just need to add the below script file to the bottom of your html file.

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html@latest/scripts/ripple.js"></script>
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>