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 switch instead)

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


<label class="mt-3 inline-flex items-center">
  <input
    type="checkbox"
    class="checkbox absolute z-10 cursor-pointer opacity-0"
  />
  <div class="form-check-input"></div>
  <span class="text-gray-700 cursor-pointer select-none">Checkbox</span>
</label>
Edit this page on Github