Basic example
Checkboxes are most often used for selecting multiple values from several options, or present a list containing sub-selections. They are most often found in surveys and forms.
<div class="flex justify-center">
<div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label inline-block text-gray-800" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label inline-block text-gray-800" for="flexCheckChecked">
Checked checkbox
</label>
</div>
</div>
</div>
Indeterminate
Checkbox input can only have two states in a form: checked or unchecked. Use the indeterminate state when the checkbox contains a sublist of selections, some of which are selected, and some unselected.
<div class="flex justify-center">
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" value="" id="flexCheckIndeterminate">
<label class="form-check-label inline-block text-gray-800" for="flexCheckIndeterminate">
Indeterminate checkbox
</label>
</div>
</div>
<!-- Custom scripts -->
<script type="text/javascript">
const checkbox = document.getElementById("flexCheckIndeterminate");
checkbox.indeterminate = true;
</script>
Disabled
Use the disabled attribute so the associated label will be automatically styled to match with a lighter color to help indicate the input state.
<div class="flex justify-center">
<div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2" type="checkbox" value="" id="flexCheckDisabled" disabled>
<label class="form-check-label inline-block text-gray-800 opacity-50" for="flexCheckDisabled">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
<label class="form-check-label inline-block text-gray-800 opacity-50" for="flexCheckCheckedDisabled">
Disabled checked checkbox
</label>
</div>
</div>
</div>
Inline
Group checkboxes on the same horizontal row by adding .form-check-inline to any .form-check.
<div class="flex justify-center">
<div class="form-check form-check-inline">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label inline-block text-gray-800" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label inline-block text-gray-800 opacity-50" for="inlineCheckbox3">3 (disabled)</label>
</div>
</div>
Without labels
Omit the wrapping .form-check for checkboxes that have no label text.
<div class="flex justify-center">
<div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 my-1 align-top bg-no-repeat bg-center bg-contain float-left cursor-pointer" type="checkbox" value="" id="flexCheckDefault3">
</div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 my-1 align-top bg-no-repeat bg-center bg-contain float-left cursor-pointer" type="checkbox" value="" id="flexCheckChecked3" checked>
</div>
</div>
</div>
If you are looking for more advanced options, try Bootstrap Checkbox from MDBootstrap.