Vue Bootstrap radio

Vue Bootstrap Radio - 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 Radio is a component used for allowing a user to make a multiple choice. Broadly used in the forms and surveys. Radio buttons are made for selecting one or several options in a list, while radios are for selecting one option from many.

Default radio buttons

Default styling for Bootstrap radio component

        
            
          <template>
            <!-- Default unchecked -->
            <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" name="radio1" id="defaultUnchecked">
              <label class="custom-control-label" for="defaultUnchecked">Default unchecked</label>
            </div>
          </template>

Material radio buttons MDB Pro component

Material Design styling for Bootstrap radio component

        
            
            <template>
              <div>
                <mdb-input type="radio" id="option1-1" name="radio1" radioValue="option1" v-model="radio1"
                  label="Material unchecked" />
              </div>
            </template>
            
        
    
        
            
            <script>
              import {
                mdbInput
              } from 'mdbvue';
              export default {
                name: 'InputsProPage',
                components: {
                  mdbInput
                },
                data() {
                  return {
                    radio1: ''
                  };
                }
              }
            </script>

Checked state

Add checked attribute to the default radio <input> element to pre-select radio button when the page loads.

Define v-model directive for Material checkbox with radioValue prop to manage radio inputs.

Default radio button 

        
            
          <template>
            <!-- Default checked -->
            <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" id="defaultChecked2" name="defaultExample2" checked>
              <label class="custom-control-label" for="defaultChecked2">Default checked</label>
            </div>
          </template>

Material checkbox MDB Pro component 

        
            
            <template>
              <div>
                <mdb-input type="radio" id="option3-1" name="radio3" radioValue="option1" v-model="radio3"
                  label="Material checked" />
              </div>
            </template>
            
        
    
        
            
            <script>
              import {
                mdbInput
              } from 'mdbvue';
              export default {
                name: 'InputsProPage',
                components: {
                  mdbInput
                },
                data() {
                  return {
                    radio3: 'option1'
                  };
                }
              }
            </script>

Name property

To create a group of radio buttons (to enable single-choice behavior) you have to set to each of the <input> the same value of the name property.

Default checkbox

In the example below we set name="groupOfDefaultRadios" to each input.

        
            
          <template>
            <div>
              <!-- Group of default radios - option 1 -->
              <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" id="defaultGroupExample1" name="groupOfDefaultRadios">
                <label class="custom-control-label" for="defaultGroupExample1">Option 1</label>
              </div>
              <!-- Group of default radios - option 2 -->
              <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" id="defaultGroupExample2" name="groupOfDefaultRadios"
                  checked>
                <label class="custom-control-label" for="defaultGroupExample2">Option 2</label>
              </div>
              <!-- Group of default radios - option 3 -->
              <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" id="defaultGroupExample3" name="groupOfDefaultRadios">
                <label class="custom-control-label" for="defaultGroupExample3">Option 3</label>
              </div>
            </div>
          </template>

Material checkbox MDB Pro component

In the example below we set name="groupOfMaterialRadios" to each input.

        
            
            <template>
              <div>
                <mdb-input type="radio" id="option4-1" name="groupOfMaterialRadios" radioValue="option1"
                  v-model="radio4" label="Option 1" />
                <mdb-input type="radio" id="option4-2" name="groupOfMaterialRadios" radioValue="option2"
                  v-model="radio4" label="Option 2" />
                <mdb-input type="radio" id="option4-3" name="groupOfMaterialRadios" radioValue="option3"
                  v-model="radio4" label="Option 3" />
              </div>
            </template>
            
        
    
        
            
            <script>
              import {
                mdbInput
              } from 'mdbvue';
              export default {
                name: 'InputsProPage',
                components: {
                  mdbInput
                },
                data() {
                  return {
                    radio4: 'option2'
                  };
                }
              }
            </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 radio buttons 

        
            
          <template>
            <div>
              <!-- Default unchecked disabled -->
              <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" id="defaultUncheckedDisabled2"
                  name="disabledGroupExample" disabled>
                <label class="custom-control-label" for="defaultUncheckedDisabled2">Default unchecked disabled</label>
              </div>
              <!-- Default checked disabled -->
              <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" id="defaultCheckedDisabled2"
                  name="disabledGroupExample" checked disabled>
                <label class="custom-control-label" for="defaultCheckedDisabled2">Default checked disabled</label>
              </div>
            </div>
          </template>

Material checkbox MDB Pro component 

        
            
            <template>
              <div>
                <mdb-input type="radio" id="option2-1" name="radio2" radioValue="option1" v-model="radio2"
                  label="Material unchecked disabled" disabled />
                <mdb-input type="radio" id="option2-2" name="radio2" radioValue="option2" v-model="radio2"
                  label="Material checked disabled" disabled />
              </div>
            </template>
            
        
    
        
            
            <script>
              import {
                mdbInput
              } from 'mdbvue';
              export default {
                name: 'InputsProPage',
                components: {
                  mdbInput
                },
                data() {
                  return {
                    radio2: 'option2'
                  };
                }
              }
            </script>

Inline

Default radio buttons

Group default radio buttons 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-radio custom-control-inline">
                <input type="radio" name="radioInline" class="custom-control-input" id="defaultInline1">
                <label class="custom-control-label" for="defaultInline1">1</label>
              </div>
              <!-- Default inline 2-->
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" name="radioInline" class="custom-control-input" id="defaultInline2">
                <label class="custom-control-label" for="defaultInline2">2</label>
              </div>
              <!-- Default inline 3-->
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" name="radioInline" class="custom-control-input" id="defaultInline3">
                <label class="custom-control-label" for="defaultInline3">3</label>
              </div>
            </div>
          </template>

Material radio buttons MDB Pro component

Group material radio buttons on the same horizontal row by wpapping in form-inline component.

        
            
            <!-- Material inline -->
            <template>
              <mdb-form-inline>
                <mdb-input type="radio" id="option5-1" name="groupOfMaterialRadios2" radioValue="1" v-model="radio5"
                  label="1" />
                <mdb-input type="radio" id="option5-2" name="groupOfMaterialRadios2" radioValue="2" v-model="radio5"
                  label="2" />
                <mdb-input type="radio" id="option5-3" name="groupOfMaterialRadios2" radioValue="3" v-model="radio5"
                  label="3" />
              </mdb-form-inline>
            </template>
            
        
    
        
            
            <script>
              import {
                mdbInput,
                mdbFormInline
              } from 'mdbvue';
              export default {
                name: 'InputsProPage',
                components: {
                  mdbInput,
                  mdbFormInline
                },
                data() {
                  return {
                    radio5: ''
                  };
                }
              }
            </script>

Radio - API

In this section you will find advanced information about the Radio 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

        
            
      <script>
        import {
          mdbInput
        } from 'mdbvue';
      </script>

API Reference: Properties

Name Type Default Description Example
active Boolean false Pre-selects radio button when the page loads. <mdb-input active ... />
checked Boolean false Pre-selects radio 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 ... />
gap Boolean false Adds gap beetween radio button border and inside circle <mdb-input gap ... />
id String The id of the input element. Required <mdb-input id="radio-1" ... />
label String Add description to the component label <mdb-input label="Example label" ... />
name String Add name of the input element. Each one of the radio buttons group has to have the same name prop <mdb-input name="name" ... />
type String text The input component type atribute <mdb-input type="radio" ... />
radioValue String The input radio value <mdb-input type="radio" radioValue="option2" ... />

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="radio" v-model="radio" />
v-on:input value Returns radio value. Use this method instead of v-model to handle radio state changes. <mdb-input @input="handleRadioChange" />