Vue Bootstrap checkbox

Vue Bootstrap checkbox - Bootstrap 4 & Material Design

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

Vue Bootstrap heckbox is a component used for allowing a user to make a multiple choice. Broadly used in the forms and surveys. Checkboxes are made for selecting one or several options in a list, while radios are for selecting one option from many.

Default checkboxes

Default styling for Bootstrap Checkbox component

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

Material checkboxes MDB Pro component

Material Design styling for Bootstrap Checkbox component

        
            
            <!-- Material unchecked -->
            <template>
              <mdb-input type="checkbox" id="checkbox1" name="check1" v-model="check1" label="Material unchecked" />
            </template>
            
        
    
        
            
            <script>
              import {
                mdbInput
              } from 'mdbvue';
              export default {
                name: 'InputsProPage',
                components: {
                  mdbInput
                },
                data() {
                  return {
                    check1: false
                  };
                }
              }
            </script>

Checked state

Add checked attribute to the <input> element to pre-select 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">.

Define v-model directive to manage Material chekcboxes.

Default checkbox 

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

Material checkbox MDB Pro component 

        
            
            <!-- Material unchecked -->
            <template>
              <mdb-input type="checkbox" id="checkbox2" name="check2" v-model="check2" label="Material checked" />
            </template>
            
        
    
        
            
            <script>
              import {
                mdbInput
              } from 'mdbvue';
              export default {
                name: 'InputsProPage',
                components: {
                  mdbInput
                },
                data() {
                  return {
                    check2: true
                  };
                }
              }
            </script>

Disabled state

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

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

Default checkbox 

        
            
          <template>
            <div>
              <!-- 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>
            </div>
          </template>

Material checkbox MDB Pro component

To provide a proper cursor styling for material checkbox add disabled prop to mdbInput component

        
            
            <template>
              <div>
                <!-- Material unchecked disabled -->
                <mdb-input 
                  type="checkbox" 
                  id="checkbox1" 
                  name="check3" 
                  v-model="check3" 
                  label="Material unchecked"
                  disabled />
                <!-- Material checked disabled -->
                <mdb-input 
                  type="checkbox" 
                  id="checkbox2" 
                  name="check4" 
                  v-model="check4" 
                  label="Material checked"
                  disabled />
              </div>
            </template>
            
        
    
        
            
            <script>
              import {
                mdbInput
              } from 'mdbvue';
              export default {
                name: 'InputsProPage',
                components: {
                  mdbInput
                },
                data() {
                  return {
                    check3: false,
                    check4: true
                  };
                }
              }
            </script>

Inline

Default checkboxes

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

        
            
          <template>
            <div>
              <!-- 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>
            </div>
          </template>

Material checkboxes MDB Pro component

Group material checkboxes or radios on the same horizontal row by wpapping in form-inline component.

        
            
            <!-- Material inline -->
            <template>
              <mdb-form-inline>
                <mdb-input type="checkbox" id="checkbox5" label="Default checkobox" />
                <mdb-input type="checkbox" id="checkbox6" label="Filled-in checkobox" filled />
                <mdb-input type="checkbox" id="checkbox7" label="Default checkobox" />
              </mdb-form-inline>
            </template>
            
        
    
        
            
            <script>
              import {
                mdbInput,
                mdbFormInline
              } from 'mdbvue';
              export default {
                name: 'InputsProPage',
                components: {
                  mdbInput,
                  mdbFormInline
                }
              }
            </script>

Checkbox - API

In this section you will find advanced information about the Checkbox component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

        
            
    <script>
      import {
        mdbInput
      } from 'mdbvue';
    </script>

API Reference: Properties

Name Type Default Description Example
active Boolean false Pre-selects button checkbox when the page loads. <mdb-input active ... />
checked Boolean false Pre-selects checkbox when the page loads. <mdb-input checked ... />
class String Override or extend the styles applied to the component. <mdb-input class="example-class" ... />
disabled Boolean false Disables input component <mdb-input disabled ... />
filled Boolean false Add filled-in style to checkbox <mdb-input filled ... />
id String The id of the input element. Required <mdb-input id="checkbox-1" ... />
label String Add description to the component label <mdb-input label="Example label" ... />
type String text The input component type atribute <mdb-input type="text" ... />

API Reference: Methods

Name Parameters Description Example
v-model value Vue.js's directive for emulating input element's two-way data binding. It is syntactic sugar for chaining together value prop and input event listener. <mdb-input type="checkbox" v-model="check" />
v-on:change value Returns checkbox value. Use this method instead of v-model to handle checkbox state changes. <mdb-input @change="handleCheckboxChange" />

Checkbox - examples & customization

Filled-in checkbox MDB Pro component 

        
            
      <template>
        <div>
          <!-- 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>
        </div>
      </template>

Checkbox color change MDB Pro component 

        
            
      <template>
        <div>
          <!-- 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>
        </div>
      </template>
      
        
    
        
            
      <style>
        .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;
        }
      </style>

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>
      
        
    
        
            
      <style>
        .checkbox-rounded [type="checkbox"][class*='filled-in']+label:after {
          border-radius: 50%;
        }
      </style>

Classic checkbox buttons 

        
            
      <template>
        <div>
          <!--Classic checkbox buttons-->
          <btn-group>
            <btn color="primary" @click.native="toggleActiveState1" :active="active1">Checkbox 1 (pre-checked)</btn>
            <btn color="primary" @click.native="toggleActiveState2" :active="active2">Checkbox 2</btn>
            <btn color="primary" @click.native="toggleActiveState3" :active="active3">Checkbox 3</btn>
          </btn-group>
          <!--Classic checkbox buttons-->
        </div>
      </template>
      
        
    
        
            
      <script>
        import {
          BtnGroup,
          Btn
        } from 'mdbvue';

        export default {
          name: 'InputsProPage',
          components: {
            BtnGroup,
            Btn
          },
          data() {
            return {
              active1: true,
              active2: false,
              active3: false,
            };
          },
          methods: {
            toggleActiveState1() {
              this.active1 = !this.active1;
            },
            toggleActiveState2() {
              this.active2 = !this.active2;
            },
            toggleActiveState3() {
              this.active3 = !this.active3;
            }
          }
        }
      </script>

Rounded checkbox buttons MDB Pro component 

        
            
      <template>
        <div>
          <!--Rounded checkbox buttons-->
          <btn-group>
            <btn color="pink" rounded @click.native="toggleActiveState1" :active="active1">Checkbox 1 (pre-checked)
            </btn>
            <btn color="pink" rounded @click.native="toggleActiveState2" :active="active2">Checkbox 2</btn>
            <btn color="pink" rounded @click.native="toggleActiveState3" :active="active3">Checkbox 3</btn>
          </btn-group>
          <!--Rounded checkbox buttons-->
        </div>
      </template>
      
        
    
        
            
      <script>
        import {
          BtnGroup,
          Btn
        } from 'mdbvue';

        export default {
          name: 'InputsProPage',
          components: {
            BtnGroup,
            Btn
          },
          data() {
            return {
              active1: true,
              active2: false,
              active3: false,
            };
          },
          methods: {
            toggleActiveState1() {
              this.active1 = !this.active1;
            },
            toggleActiveState2() {
              this.active2 = !this.active2;
            },
            toggleActiveState3() {
              this.active3 = !this.active3;
            }
          }
        }
      </script>

Rounded checkbox buttons with icons MDB Pro component 

        
            
      <template>
        <div>
          <!--Rounded checkbox buttons with icons-->
          <btn-group>
            <btn color="warning" rounded icon="diamond" iconRight @click.native="toggleActiveState1" :active="active1">
              Checkbox 1 (pre-checked)</btn>
            <btn color="warning" rounded icon="user" iconRight @click.native="toggleActiveState2" :active="active2">
              Checkbox 2</btn>
            <btn color="warning" rounded icon="code" iconRight @click.native="toggleActiveState3" :active="active3">
              Checkbox 3</btn>
          </btn-group>
          <!--Rounded checkbox buttons with icons-->
        </div>
      </template>
      
        
    
        
            
      <script>
        import {
          BtnGroup,
          Btn
        } from 'mdbvue';

        export default {
          name: 'InputsProPage',
          components: {
            BtnGroup,
            Btn
          },
          data() {
            return {
              active1: true,
              active2: false,
              active3: false,
            };
          },
          methods: {
            toggleActiveState1() {
              this.active1 = !this.active1;
            },
            toggleActiveState2() {
              this.active2 = !this.active2;
            },
            toggleActiveState3() {
              this.active3 = !this.active3;
            }
          }
        }
      </script>