Edit these docs

Radio buttons

Bootstrap radio button

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

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



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



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



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



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



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



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



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



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



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



            <!-- 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>
Edit these docs

Getting started: download & setup

Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 10,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Compilation & Customization tutorial

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

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

  • Community developed components & design projects
  • Technical support & community forum
  • CLI interface & free project hosting
  • Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!

Sign up now
Edit these docs

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="far fa-gem 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="fas 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="fas fa-code ml-2"></i>
          </label>

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