Checkbox

Bootstrap checkbox

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

The checkbox is a component used to allow a user to make multiple choices which is broadly used in forms and surveys.

Checkboxes are used to select one or several options in a list, while radio (option) buttons are for selecting one option from many.

Default checkboxes

Default styling for the Bootstrap Checkbox component

Edit in sandbox 
        
            

              <!-- Default unchecked -->
              <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                  <label class="custom-control-label" for="defaultUnchecked">Default unchecked</label>
              </div>

Material checkboxes MDB Pro component

The Material Design styling for Bootstrap Checkbox component

Edit in sandbox 
        
            

              <!-- Material unchecked -->
              <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="materialUnchecked">
                  <label class="form-check-label" for="materialUnchecked">Material unchecked</label>
              </div>

Checked state

Add the checked attribute to the <input> element in order to pre-select the checkbox when the page loads.

The checked attribute is a boolean attribute.

The checked attribute can be used with <input type="checkbox"> and <input type="radio">.

Default checkbox

Edit in sandbox 
        
            

            <!-- Default checked -->
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="defaultChecked2" checked>
              <label class="custom-control-label" for="defaultChecked2">Default checked</label>
            </div>

Material checkbox MDB Pro component

Edit in sandbox 
        
            

            <!-- Material checked -->
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="materialChecked2" checked>
              <label class="form-check-label" for="materialChecked2">Material checked</label>
            </div>

Indeterminate state

Note: The indeterminate state is only visual. The checkbox is still either checked or unchecked as a state.

Use this simple jQuery function to set an indeterminate state to your checkbox:

$('#yourCheckboxID').prop('indeterminate', true);

Default checkbox

Edit in sandbox 
        
            

            <!-- Default indeterminate -->
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="defaultIndeterminate2" checked>
              <label class="custom-control-label" for="defaultIndeterminate2">Default indeterminate</label>
            </div>

          
        
    
        
            
            $('#defaultIndeterminate2').prop('indeterminate', true);

Material checkbox MDB Pro component

Edit in sandbox 
        
            

              <!-- Material indeterminate -->
              <div class="form-check">
                <input type="checkbox" class="form-check-input" id="materialIndeterminate2" checked>
                <label class="form-check-label" for="materialIndeterminate2">Material indeterminate</label>
              </div>

            
        
    
        
            
              $('#materialIndeterminate2').prop('indeterminate', true);

Disabled state

Add the disabled boolean attribute to the <input> element and then the custom indicator and label description will be automatically styled and blocked.

A disabled <input> element is unusable and un-clickable.

Default checkbox

Edit in sandbox 
        
            

            <!-- Default unchecked disabled -->
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="defaultUncheckedDisabled2" disabled>
              <label class="custom-control-label" for="defaultUncheckedDisabled2">Default unchecked disabled</label>
            </div>

            <!-- Default checked disabled -->
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="defaultCheckedDisabled2" checked disabled>
              <label class="custom-control-label" for="defaultCheckedDisabled2">Default checked disabled</label>
            </div>

Material checkbox MDB Pro component

To provide a proper cursor styling for the material checkbox, in addition to setting the disabled attribute you’ll also need to add the .disabled class to the <label> element.

Edit in sandbox 
        
            

            <!-- Material unchecked disabled -->
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="materialUncheckedDisabled2" disabled>
              <label class="form-check-label" for="materialUncheckedDisabled2">Material unchecked disabled</label>
            </div>

            <!-- Material checked disabled -->
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="materialCheckedDisabled" checked="checked2" disabled>
              <label class="form-check-label" for="materialCheckedDisabled2">Material checked disabled</label>
            </div>

Inline

Default checkboxes

Group default checkboxes or radios on the same horizontal row by adding the .custom-control-inline class to any parent element of the <input> element.

Edit in sandbox 
        
            

            <!-- Default inline 1-->
            <div class="custom-control custom-checkbox custom-control-inline">
              <input type="checkbox" class="custom-control-input" id="defaultInline1">
              <label class="custom-control-label" for="defaultInline1">1</label>
            </div>

            <!-- Default inline 2-->
            <div class="custom-control custom-checkbox custom-control-inline">
              <input type="checkbox" class="custom-control-input" id="defaultInline2">
              <label class="custom-control-label" for="defaultInline2">2</label>
            </div>

            <!-- Default inline 3-->
            <div class="custom-control custom-checkbox custom-control-inline">
              <input type="checkbox" class="custom-control-input" id="defaultInline3">
              <label class="custom-control-label" for="defaultInline3">3</label>
            </div>

Material checkboxes MDB Pro component

Group material checkboxes or radios on the same horizontal row by adding the .form-check-inline class to any parent element of the <input> element.

Edit in sandbox 
        
            

            <!-- Material inline 1 -->
            <div class="form-check form-check-inline">
              <input type="checkbox" class="form-check-input" id="materialInline1">
              <label class="form-check-label" for="materialInline1">1</label>
            </div>

            <!-- Material inline 2 -->
            <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="materialInline2">
                <label class="form-check-label" for="materialInline2">2</label>
            </div>

            <!-- Material inline 3 -->
            <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="materialInline3">
                <label class="form-check-label" for="materialInline3">3</label>
            </div>