Tailwind Checkbox component

Responsive checkboxes built with Tailwind CSS. A select component used in forms & surveys. It enables choosing one or several options in a list. Free download.


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.