Radio buttons

Bootstrap radio button

Radio button is a component used for allowing a user to make a single choice among many options, while Checkboxes are for selecting multiple options.

Default radio buttons

Default styling for Bootstrap radio button component



            <!-- 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 Bootstrap radio button component



            <!-- 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 checked attribute to the <input> element yo pre-select 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 checkbox 



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



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

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



            <!-- 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 .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" 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 .form-check-inline class to any parent element of the <input> element.



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

Getting started : download & setup

Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Radio buttons examples & customization

Radio buttons with gap MDB Pro component

Add .with-gap class to the <input> element to apply a "gap style" to the radio button.



        <!--Radio group-->
        <div class="form-check">
          <input type="radio" class="form-check-input with-gap" id="radioGap1" name="groupOfRadioGap">
          <label class="form-check-label" for="radioGap1">Option 1</label>
        </div>

        <div class="form-check">
          <input type="radio" class="form-check-input with-gap" id="radioGap2" name="groupOfRadioGap" checked>
          <label class="form-check-label" for="radioGap2">Option 2</label>
        </div>

        <div class="form-check">
          <input type="radio" class="form-check-input with-gap" id="radioGap3" name="groupOfRadioGap">
          <label class="form-check-label" for="radioGap3">Option 3</label>
        </div>
        <!--Radio group-->

Radio button color change MDB Pro component 



        <!--Radio group-->
        <div class="form-check radio-green">
          <input type="radio" class="form-check-input" id="radioGreen1" name="groupOfRadioGreen">
          <label class="form-check-label" for="radioGreen1">Option 1</label>
        </div>

        <div class="form-check radio-green">
          <input type="radio" class="form-check-input" id="radioGreen2" name="groupOfRadioGreen" checked>
          <label class="form-check-label" for="radioGreen2">Option 2</label>
        </div>

        <div class="form-check radio-green">
          <input type="radio" class="form-check-input" id="radioGreen3" name="groupOfRadioGreen">
          <label class="form-check-label" for="radioGreen3">Option 3</label>
        </div>
        <!--Radio group-->

      


          .radio-green [type="radio"]:checked+label:after {
            border-color: #00C851;
            background-color: #00C851;
          }

Classic radio buttons 



        <!--Radio buttons-->
        <div class="btn-group" data-toggle="buttons">

          <label class="btn btn-default active form-check-label">
              <input class="form-check-input" type="radio" checked autocomplete="off"> radio 1 (pre-checked)
          </label>

          <label class="btn btn-default form-check-label">
              <input class="form-check-input" type="radio" autocomplete="off"> radio 2
          </label>

          <label class="btn btn-default form-check-label">
              <input class="form-check-input" type="radio" autocomplete="off"> radio 3
          </label>

        </div>
        <!--Radio buttons-->

Rounded radio buttons MDB Pro component 



        <!--Radio buttons-->
        <div class="btn-group" data-toggle="buttons">

          <label class="btn btn-purple btn-rounded active btn-md form-check-label">
            <input class="form-check-input" type="radio" checked autocomplete="off"> radio 1 (pre-checked)
          </label>

          <label class="btn btn-purple btn-rounded btn-md form-check-label">
            <input class="form-check-input" type="radio" autocomplete="off"> radio 2
          </label>

          <label class="btn btn-purple btn-rounded btn-md form-check-label">
            <input class="form-check-input" type="radio" autocomplete="off"> radio 3
          </label>

        </div>
        <!--Radio buttons-->

Rounded radio buttons with icons MDB Pro component 



        <!--Radio buttons-->
        <div class="btn-group" data-toggle="buttons">

          <label class="btn btn-cyan btn-rounded active form-check-label">
            <input class="form-check-input" type="radio" checked autocomplete="off"> radio 1 (pre-checked)
            <i class="fa fa-diamond ml-2"></i>
          </label>

          <label class="btn btn-cyan btn-rounded form-check-label">
            <input class="form-check-input" type="radio" autocomplete="off"> radio 2
            <i class="fa fa-user ml-2"></i>
          </label>

          <label class="btn btn-cyan btn-rounded form-check-label">
            <input class="form-check-input" type="radio" autocomplete="off"> radio 3
            <i class="fa fa-code ml-2"></i>
          </label>

        </div>
        <!--Radio buttons-->