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