Radio Button
Bootstrap 4 Radio Button with Material Design UI
Radio button is a form control that allows users to make a single choice from the list of available options.
Bootstrap 4 Radio Button
Bootstrap 4 provides 2 types of radio buttons - basic and custom. For basic radio button, use class .form-check-input in the <input> tag and .form-check-label in the <label> tag and wrap both the elements with a <div> with class .form-check. For custom radio button, use .custom-control-input in the <input> tag and .custom-control-label in the <label> tag and wrap both the elements with a <div> with classes .custom-control and .custom-radio.
Propeller Radio Button
Propeller applies Material design standards to the Bootstrap 4 custom radio button to create Propeller radio button. Add .pmd-radio besides .custom-radio to create a propeller customized radio. You can also add .pmd-radio-ripple-effect to the label provide a ripple effect to the radio.
Inline Radio Button
Use .custom-control-inline besides .custom-control to create radio buttons that appear on the same line.
Inverse Radio Button
Use .bg-dark and .text-white to the card structure to create an inverse radio.
Radio Button Validation
You can even perform validations to the radio buttons.
Server Side Validation
Client Side Validation
Radio Buttons without Labels
Use .position-static besides .custom-control-label to create radio buttons without labels.
jQuery Plugin
Call the jQuery plugin to initialize the radio while fetching the data dynamically.
Configuration Options
The Propeller CSS classes apply various predefined visual enhancements to the form elements. The table lists the available classes and their effects.
| Propeller Class | Effect | Remark |
|---|---|---|
.pmd-radio |
To create propeller customized radiobutton | Optional |
.pmd-radio-ripple-effect |
Add this class to create ripple effect to radio | Optional |