Radio buttons

Bootstrap radio button

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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

Default radio buttons

Default styling for the Bootstrap radio button component

Edit in sandbox 
        
            

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

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

Material radio buttons MDB Pro component

Material Design styling for the Bootstrap radio button component

Edit in sandbox 
        
            

            <!-- Material unchecked -->
            <div class="form-check">
              <input type="radio" class="form-check-input" id="materialUnchecked" name="materialExampleRadios">
              <label class="form-check-label" for="materialUnchecked">Material unchecked</label>
            </div>

            <!-- Material checked -->
            <div class="form-check">
              <input type="radio" class="form-check-input" id="materialChecked" name="materialExampleRadios" checked>
              <label class="form-check-label" for="materialChecked">Material checked</label>
            </div>

Checked state

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

The checked attribute is a boolean attribute.

The checked attribute can be used with <input type="checkbox"> and <input type="radio">.

Default radio

Edit in sandbox 
        
            

            <!-- 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 radio MDB Pro component

Edit in sandbox 
        
            

            <!-- Material checked -->
            <div class="form-check">
              <input type="radio" class="form-check-input" id="materialChecked2" name="materialExample2" checked>
              <label class="form-check-label" for="materialChecked2">Material checked</label>
            </div>

Name property

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

Default radio

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

Edit in sandbox 
        
            

            <!-- 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 radio MDB Pro component

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

Edit in sandbox 
        
            

            <!-- Group of material radios - option 1 -->
            <div class="form-check">
              <input type="radio" class="form-check-input" id="materialGroupExample1" name="groupOfMaterialRadios">
              <label class="form-check-label" for="materialGroupExample1">Option 1</label>
            </div>

            <!-- Group of material radios - option 2 -->
            <div class="form-check">
              <input type="radio" class="form-check-input" id="materialGroupExample2" name="groupOfMaterialRadios" checked>
              <label class="form-check-label" for="materialGroupExample2">option 2</label>
            </div>

            <!-- Group of material radios - option 3 -->
            <div class="form-check">
              <input type="radio" class="form-check-input" id="materialGroupExample3" name="groupOfMaterialRadios">
              <label class="form-check-label" for="materialGroupExample3">option 3</label>
            </div>

Disabled state

Add a disabled boolean attribute to the <input> element 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

Edit in sandbox 
        
            

            <!-- 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 radio buttons MDB Pro component

To provide a proper cursor styling for material radio button, apart from setting a disabled attribute you’ll also need to add the .disabled class to the <label> element.

Edit in sandbox 
        
            

            <!-- Material unchecked disabled -->
            <div class="form-check">
              <input type="radio" class="form-check-input" id="materialUncheckedDisabled2" name="disabledGroupExample2" disabled>
              <label class="form-check-label disabled" for="materialUncheckedDisabled2">Material unchecked disabled</label>
            </div>

            <!-- Material checked disabled -->
            <div class="form-check">
              <input type="radio" class="form-check-input" id="materialCheckedDisabled2" name="disabledGroupExample2" checked disabled>
              <label class="form-check-label disabled md-disabled" for="materialCheckedDisabled2">Material checked disabled</label>
            </div>

Inline

Default radio buttons

Group default radio buttons or checkboxes on the same horizontal row by adding the .custom-control-inline class to any parent element of the <input> element.

Edit in sandbox 
        
            

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

Material radio buttons MDB Pro component

Group material radio buttons or checkboxes on the same horizontal row by adding the .form-check-inline class to any parent element of the <input> element.

Edit in sandbox 
        
            

            <!-- Material inline 1 -->
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
              <label class="form-check-label" for="materialInline1">1</label>
            </div>

            <!-- Material inline 2 -->
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
              <label class="form-check-label" for="materialInline2">2</label>
            </div>

            <!-- Material inline 3 -->
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
              <label class="form-check-label" for="materialInline3">3</label>
            </div>