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="inline-flex items-center mt-3">
  <input
    type="checkbox"
    class="checkbox opacity-0 cursor-pointer absolute z-10"
  />
  <div class="form-check-input"></div>
  <span class="text-gray-700">Checkbox</span>
</label>