Checkbox

Vue Bootstrap 5 Checkbox component

Vue checkbox is a component used to allow a user to make multiple choices that are 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.

Basic example

Browser default checkboxes and radios are replaced with the help of .form-check, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. 

        
            
            <template>
              <MDBCheckbox label="Default checkbox" v-model="checkbox1" />
              <MDBCheckbox label="Checked checkbox" v-model="checkbox2" />
            </template>
          
        
    
        
            
            <script>
              import { MDBCheckbox } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBCheckbox
                },
                setup() {
                  const checkbox1 = ref(false);
                  const checkbox2 = ref(true);

                  return {
                    checkbox1,
                    checkbox2
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBCheckbox } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const checkbox1 = ref(false);
              const checkbox2 = ref(true);
            </script>

Disabled

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state. 

        
            
            <template>
              <MDBCheckbox label="Disabled checkbox" disabled v-model="checkbox3" />
              <MDBCheckbox label="Disabled checked checkbox" disabled v-model="checkbox4" />
            </template>
          
        
    
        
            
            <script>
              import { MDBCheckbox } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              export default {
                components: {
                  MDBCheckbox,
                },
                setup() {
                  const checkbox3 = ref(false);
                  const checkbox4 = ref(true);

                  return {
                    checkbox3,
                    checkbox4,
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBCheckbox } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              const checkbox3 = ref(false);
              const checkbox4 = ref(true);
            </script>

Inline

Group checkboxes or radios on the same horizontal row by adding inline property to any MDBCheckbox. 

        
            
            <template>
              <MDBCheckbox label="1" inline />
              <MDBCheckbox label="2" inline />
              <MDBCheckbox label="(disabled)" inline disabled />
            </template>
          
        
    
        
            
            <script>
              import { MDBCheckbox } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBCheckbox,
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBCheckbox } from 'mdb-vue-ui-kit';
            </script>

Without labels

Omit the wrapping .form-check for checkboxes and radios that have no label text by adding :formCheck="false". Remember to still provide some form of label for assistive technologies (for instance, using aria-label). 

        
            
            <template>
              <MDBCheckbox aria-label="..." :formCheck="false" />
              <MDBCheckbox aria-label="..." :formCheck="false" />
            </template>
          
        
    
        
            
            <script>
              import { MDBCheckbox } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBCheckbox,
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBCheckbox } from 'mdb-vue-ui-kit';
            </script>

Toggle buttons

MDB’s .btn styles can be applied to <label>s, to provide checkbox style button toggling. Add :btnCheck="true" to any MDBCheckbox. 

        
            
            <template>
              <MDBCheckbox
                tag="span"
                :btnCheck="true"
                labelClass="btn btn-primary"
                label="Checkbox button"
                v-model="checkbox5"
              />
              <MDBCheckbox
                tag="span"
                :btnCheck="true"
                labelClass="btn btn-primary"
                label="Checkbox button"
                v-model="checkbox6"
              />
              <MDBCheckbox
                tag="span"
                :btnCheck="true"
                labelClass="btn btn-primary"
                label="Checkbox button"
                v-model="checkbox7"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBCheckbox } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              export default {
                components: {
                  MDBCheckbox,
                },
                setup() {
                  const checkbox5 = ref(false);
                  const checkbox6 = ref(true);
                  const checkbox7 = ref(false);

                  return {
                    checkbox5,
                    checkbox6,
                    checkbox7,
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBCheckbox } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              const checkbox5 = ref(false);
              const checkbox6 = ref(true);
              const checkbox7 = ref(false);
            </script>

Checkbox - API

Import

        
            
          <script>
            import {
              MDBCheckbox
            } from 'mdb-vue-ui-kit';
          </script>

Properties

Property Type Default Description
label String "" Changes input label
wrapperClass String "" Changes input wrapper classes
labelClass String "" Changes input label classes
inputClass String "" Adds custom input class
inline Boolean false Enables inline mode
btnCheck Boolean false Enables btn mode
wrap Boolean true Enables div.form-check wrapper
formCheck Boolean true Enables wrapper .formCheck class
tag String "div" Changes input wrapper tag
v-model Boolean "" Changes input value with two-way data binding
required Boolean Adds required attribute to input element
validateOnChange Boolean Add validation on change event to element
isValidated Boolean false Marks element as validated.
isValid Boolean "" Sets element as valid or invalid
validFeedback String "" Sets valid status feedback for validated element
invalidFeedback String "" Sets invalid status feedback for validated element
tooltipFeedback Boolean false Display validation feedback in a styled tooltip