Checkbox

Bootstrap checkbox

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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>