Checkbox

Bootstrap checkbox

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



              <!-- 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



              <!-- 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 



            <!-- 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 



            <!-- 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 



            <!-- 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 



              <!-- 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 



            <!-- 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.



            <!-- 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.



            <!-- 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.



            <!-- 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>

Getting started : download & setup

Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Checkbox examples & customization

Filled-in checkbox MDB Pro component 



        <!-- Filled-in checkbox -->
        <div class="form-check">
            <input type="checkbox" class="form-check-input filled-in" id="filledInCheckbox" checked>
            <label class="form-check-label" for="filledInCheckbox">Filled-in checkbox</label>
        </div>

        <!-- Filled-in checkbox disabled-->
        <div class="form-check">
          <input type="checkbox" class="form-check-input filled-in" id="filledInCheckboxDisabled" checked disabled>
          <label class="form-check-label disabled" for="filledInCheckboxDisabled">Filled-in checkbox disabled</label>
        </div>

Checkbox color change MDB Pro component 



        <!-- Teal example -->
        <div class="form-check checkbox-teal">
          <input type="checkbox" class="form-check-input" id="tealExample" checked>
          <label class="form-check-label" for="tealExample">Teal checkbox</label>
        </div>

        <!-- Filled-in orange example -->
        <div class="form-check checkbox-warning-filled">
          <input type="checkbox" class="form-check-input filled-in" id="orangeExample" checked>
          <label class="form-check-label" for="orangeExample">Filled-in orange example</label>
        </div>

      


          .checkbox-teal [type="checkbox"]:checked+label:before {
            border-color: transparent #009688 #009688 transparent;
          }

          .checkbox-warning-filled [type="checkbox"][class*='filled-in']:checked+label:after {
            border-color: #FF8800;
            background-color: #FF8800;
          }

Rounded checkbox MDB Pro component 



        <!-- Filled-in rounded example -->
        <div class="form-check checkbox-rounded">
          <input type="checkbox" class="form-check-input filled-in" id="roundedExample" checked>
          <label class="form-check-label" for="roundedExample">Filled-in rounded example</label>
        </div>

      


        .checkbox-rounded [type="checkbox"][class*='filled-in']+label:after {
          border-radius: 50%;
        }

Classic checkbox buttons 



        <!--Classic checkbox buttons-->
        <div class="btn-group mr-4" data-toggle="buttons">

            <label class="btn btn-primary active form-check-label">
                <input type="checkbox" class="form-check-input" checked autocomplete="off"> Checkbox 1 (pre-checked)
            </label>

            <label class="btn btn-primary form-check-label">
                <input type="checkbox" class="form-check-input" autocomplete="off"> Checkbox 2
            </label>

            <label class="btn btn-primary form-check-label">
                <input type="checkbox" class="form-check-input" autocomplete="off"> Checkbox 3
            </label>

        </div>
        <!--Classic checkbox buttons-->

Rounded checkbox buttons MDB Pro component 



        <!--Rounded checkbox buttons-->
        <div class="btn-group" data-toggle="buttons">

            <label class="btn btn-pink btn-rounded active btn-md form-check-label">
                <input type="checkbox" class="form-check-input" checked autocomplete="off"> Checkbox 1 (pre-checked)
            </label>

            <label class="btn btn-pink btn-rounded btn-md form-check-label">
                <input type="checkbox" class="form-check-input" autocomplete="off"> Checkbox 2
            </label>

            <label class="btn btn-pink btn-rounded btn-md form-check-label">
                <input type="checkbox" class="form-check-input" autocomplete="off"> Checkbox 3
            </label>

        </div>
        <!--Rounded checkbox buttons-->

Rounded checkbox buttons with icons MDB Pro component 



        <!--Rounded checkbox buttons with icons-->
        <div class="btn-group" data-toggle="buttons">

            <label class="btn btn-warning btn-rounded active form-check-label">
                <input type="checkbox" class="form-check-input" checked autocomplete="off"> Checkbox 1 (pre-checked)
                <i class="fa fa-diamond ml-2"></i>
            </label>

            <label class="btn btn-warning btn-rounded form-check-label">
                <input type="checkbox" class="form-check-input" autocomplete="off"> Checkbox 2
                <i class="fa fa-user ml-2"></i>
            </label>

            <label class="btn btn-warning btn-rounded form-check-label">
                <input type="checkbox" class="form-check-input" autocomplete="off"> Checkbox 3
                <i class="fa fa-code ml-2"></i>
            </label>

        </div>
        <!--Rounded checkbox buttons with icons-->