Radio
Vue Bootstrap 5 Radio
Vue Radio Button is a component used to allow a user to make a single choice among a number of options (whereas Checkboxes are used for selecting multiple options).
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>
<MDBRadio
label="Default radio"
name="flexRadioDefault"
v-model="radio1"
value="flexRadioDefault1"
/>
<MDBRadio
label="Default checked radio"
name="flexRadioDefault"
v-model="radio1"
value="flexRadioDefault2"
/>
</template>
<script>
import { MDBRadio } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
export default {
components: {
MDBRadio,
},
setup() {
const radio1 = ref('flexRadioDefault2');
return {
radio1,
};
},
};
</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>
<MDBRadio label="Disabled radio" name="flexRadioDisabled" disabled />
<MDBRadio label="Disabled checked radio" name="flexRadioDisabled" disabled checked />
</template>
<script>
import { MDBRadio } from 'mdb-vue-ui-kit';
export default {
components: {
MDBRadio,
},
};
</script>
Inline
Group checkboxes or radios on the same horizontal row by adding
inline
property to any MDBRadio
.
<template>
<MDBRadio label="1" value="option1" v-model="radio2" inline name="inlineRadioOptions" />
<MDBRadio label="2" value="option2" v-model="radio2" inline name="inlineRadioOptions" />
<MDBRadio
label="(disabled)"
value="option3"
v-model="radio2"
inline
name="inlineRadioOptions"
disabled
/>
</template>
<script>
import { MDBRadio } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
export default {
components: {
MDBRadio,
},
setup() {
const radio2 = ref(null);
return {
radio2,
};
},
};
</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>
<MDBRadio aria-label="..." name="radioNoLabel" :formCheck="false" value="" />
<MDBRadio aria-label="..." name="radioNoLabel" :formCheck="false" value="" />
</template>
<script>
import { MDBRadio } from 'mdb-vue-ui-kit';
export default {
components: {
MDBRadio,
},
};
</script>
Radio - API
Import
<script>
import {
MDBRadio
} 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 |
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 |
value
|
String | "" |
Sets radio value |
v-model
|
String | "" |
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 |