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
import { mdbInput } from 'mdbvue';
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>