web
mobile
Edit these docs Rate these docs

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>

           
Edit these docs Rate these docs

Getting started: download & setup


Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 5,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Compilation & Customization tutorial

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
  

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

  • Community developed components & design projects
  • Technical support & community forum
  • CLI interface & free project hosting
  • Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!

Sign up now
Edit these docs Rate these docs

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="far fa-gem 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="fas 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="fas fa-code ml-2"></i>
            </label>

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