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

<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>
<script setup lang="ts">
  import { MDBRadio } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const radio1 = ref('flexRadioDefault2');
</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>
<script setup lang="ts">
  import { MDBRadio } from 'mdb-vue-ui-kit';
</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('radio2');

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

  const radio2 = ref('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>
<script setup lang="ts">
  import { MDBRadio } from 'mdb-vue-ui-kit';
</script>

Toggle buttons

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

<template>
  <MDBBtnGroup>
    <MDBRadio :btnCheck="true" :wrap="false" labelClass="btn btn-secondary" label="Checked" name="options" value="option1"
      v-model="radio3" />
    <MDBRadio :btnCheck="true" :wrap="false" labelClass="btn btn-secondary" label="Radio" name="options" value="option2"
      v-model="radio3" />
    <MDBRadio :btnCheck="true" :wrap="false" labelClass="btn btn-secondary" label="Radio" name="options" value="option3"
      v-model="radio3" />
  </MDBBtnGroup>
</template>
<script>
  import { MDBRadio, MDBBtnGroup } from "mdb-vue-ui-kit";
  import { ref } from "vue";

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

      return {
        radio3
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBRadio, MDBBtnGroup } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const radio3 = ref("option1");
</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