Rate this docs

Vue Bootstrap radio

Vue Bootstrap Radio - Bootstrap 4 & Material Design

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.

Material radio value

Material radio uses $emit inside component. To handle radio state changes use @input event instead of v-model.


Default radio buttons

Default styling for Bootstrap radio component



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

          

Material radio buttons MDB Pro component

Material Design styling for Bootstrap radio component



            <!-- Material unchecked -->
            <template>
              <mdb-input 
                type="radio"
                id="option3-1"
                name="radio3"
                value="My option"
                label="Material unchecked"
                @input="handleRadio"
              />
              <mdb-input 
                type="radio"
                id="option3-2"
                name="radio3"
                value="My option"
                label="Material checked"
                checked
                @input="handleRadio"
              />
              <mdb-input 
                type="radio"
                id="option3-3"
                name="radio3"
                value="My option"
                label="Material unchecked disabled"
                disabled
                @input="handleRadio"
              />
              <mdb-input 
                type="radio"
                id="option3-4"
                name="radio3"
                value="My option"
                label="Material checked disabled"
                checked
                disabled
                @input="handleRadio"
              />
            </template>

            <script>
            import { mdbInput } from 'mdbvue';
            
            export default {
              name: 'InputsProPage',
              components: {
                mdbInput
              }
            }
            </script>

          

Checked state

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

The checked attribute is a boolean attribute.

Default radio button



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

            

Material checkbox MDB Pro component



            <!-- Material checked -->
            <mdb-input
              type="radio"
              id="materialChecked3"
              name="materialExample3"
              value="example"
              label="Material checked"
              checked
              @input="handleRadio"
            />

            

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.



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

          

Material checkbox MDB Pro component

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



            <mdb-input type="radio"
              id="materialGroupExample01"
              name="materialGroupExample3"
              value="option1"
              label="Option 1"
              checked 
              @input="handleRadio"
            />
            <mdb-input type="radio"
              id="materialGroupExample02"
              name="materialGroupExample3"
              value="option2"
              label="Option 2" 
              @input="handleRadio"
            />
            <mdb-input type="radio"
              id="materialGroupExample03"
              name="materialGroupExample3"
              value="option3"
              label="Option 3" 
              @input="handleRadio"
            />

          

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



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

            

Material checkbox MDB Pro component


            
            <!-- Material unchecked disabled -->
            <mdb-input type="radio"
              id="materialUncheckedDisabled2"
              name="disabledGroupExample2"
              value="Material unchecked disabled"
              label="Material unchecked disabled" 
              disabled
              @input="handleRadio"
            />

            <!-- Material checked disabled -->
            <mdb-input type="radio"
              id="materialCheckedDisabled2"
              name="disabledGroupExample2"
              value="Material checked disabled"
              label="Material checked disabled" 
              disabled
              @input="handleRadio"
            />

            

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.



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

          

Material radio buttons MDB Pro component

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



            <!-- Material inline -->
            <template>
              <form-inline>
                <mdb-input type="radio"
                  id="option4-1"
                  name="option4"
                  value="option1"
                  label="Option 1" 
                  @input="handleRadio"
                />
                <mdb-input type="radio"
                  id="option4-2"
                  name="option4"
                  value="option2"
                  label="Option 2" 
                  @input="handleRadio"
                />
                <mdb-input type="radio"
                  id="option4-3"
                  name="option4"
                  value="option3"
                  label="Option 3" 
                  @input="handleRadio"
                />
              </form-inline>
            </template>

            <script>
            import { mdbInput, FormInline } from 'mdbvue';
            
            export default {
              name: 'InputsProPage',
              components: {
                mdbInput,
                FormInline
              }
            }
            </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


          import { mdbInput } from 'mdbvue';
      

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" ... />

API Reference: Methods

Name Parameters Description Example
v-on:input value Returns radio value. Use this method instead of v-model to handle radio state changes. <mdb-input @input="handleRadioChange" />