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>

Toggle buttons

Toggle buttons can be grouped in a button group if needed. 


          <template>
            <MDBRadio
              tag="span"
              :btnCheck="true"
              labelClass="btn btn-primary"
              label="Checkbox button"
              v-model="radio5"
            />
            <MDBRadio
              tag="span"
              :btnCheck="true"
              labelClass="btn btn-primary"
              label="Checkbox button"
              v-model="radio6"
            />
            <MDBRadio
              tag="span"
              :btnCheck="true"
              labelClass="btn btn-primary"
              label="Checkbox button"
              v-model="radio7"
            />
          </template>
        

          <script>
            import { MDBRadio } from 'mdb-vue-ui-kit';
            import { ref } from 'vue';

            export default {
              components: {
                MDBRadio,
              },
              setup() {
                const radio3 = ref('option1');

                return {
                  radio3,
                };
              },
            };
          </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