Radio

React Bootstrap 5 Radio component

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

Basic example

Browser default checkboxes and radios are replaced with the help of .form-check, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Structurally, our <input>s and <label>s are sibling elements as opposed to an <input> within a <label>. This is slightly more verbose as you must specify id and for attributes to relate the <input> and <label>.

We use the sibling selector (~) for all our <input> states, like :checked or :disabled. When combined with the .form-check-label class, we can easily style the text for each item based on the <input>'s state. 

        
            
            import React from 'react';
            import { MDBRadio } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <div>
                  <MDBRadio name='flexRadioDefault' id='flexRadioDefault1' label='Default radio' />
                  <MDBRadio name='flexRadioDefault' id='flexRadioDefault2' label='Default checked radio' defaultChecked />
                </div>
              );
            }

Disabled

Add the disabled property and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state. 

        
            
            import React from 'react';
            import { MDBRadio } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <div>
                  <MDBRadio id='flexRadioDisabled' disabled label='Disabled radio' />
                  <MDBRadio id='flexRadioCheckedDisabled' defaultChecked disabled label='Disabled checked radio' />
                </div>
              );
            }

Inline

Group checkboxes or radios on the same horizontal row by adding inline property. 

        
            
            import React from 'react';
            import { MDBRadio } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBRadio name='inlineRadio' id='inlineRadio1' value='option1' label='1' inline />
                  <MDBRadio name='inlineRadio' id='inlineRadio2' value='option2' label='2' inline />
                  <MDBRadio name='inlineRadio' id='inlineRadio3' value='option3' label='3 (disabled)' disabled inline />
                </>
              );
            }

Without labels

Omit the label property for checkboxes and radios that have no label text. Remember to still provide some form of label for assistive technologies (for instance, using aria-label). 

        
            
            import React from 'react';
            import { MDBRadio } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <div>
                  <MDBRadio name='radioNoLabel' id='radioNoLabell' value='' aria-label='...' />
                  <MDBRadio name='radioNoLabel' id='radioNoLabel2' value='' aria-label='...' />
                </div>
              );
            }

Toggle buttons

MDB’s .btn styles can be applied to <label>s, to provide checkbox style button toggling. Add an MDBRadio with a btn property to toggle the input state. You can change the color using btnColor property. 

        
            
            import React from 'react';
            import { MDBRadio, MDBBtnGroup } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBBtnGroup>
                  <MDBRadio btn btnColor='secondary' id='btn-radio' name='options' wrapperTag='span' label='Radio button' />
                  <MDBRadio
                    btn
                    btnColor='secondary'
                    id='btn-radio2'
                    name='options'
                    wrapperClass='mx-2'
                    wrapperTag='span'
                    label='Radio button'
                    defaultChecked
                  />
                  <MDBRadio btn btnColor='secondary' id='btn-radio3' name='options' wrapperTag='span' label='Radio button' />
                </MDBBtnGroup>
              );
            }

Radio - API

Import

        
            
            import { MDBRadio } from 'mdb-react-ui-kit';

Properties

MDBRadio

Name Type Default Description Example
btn boolean '' Makes a button from the MDBRadio <MDBRadio btn label="Example label" id="radioExample" />
btnColor string '' Allows to set the color of the button radio <MDBRadio btn btnColor="secondary" label="Example label" id="radioExample" />
checked boolean '' Defines whether the radio is checked <MDBRadio defaultChecked label="Example label" id="radioExample" />
defaultChecked boolean '' Makes the MDBRadio checked by default <MDBRadio defaultChecked label="Example label" id="radioExample" />
disabled string '' Makes the MDBRadio disabled <MDBRadio disabled label="Example label" id="radioExample" />
disableWrapper boolean false Disables input wrapper <MDBRadio disableWrapper />
id string '' Defines an id for the MDBRadio <MDBRadio label="Example label" id="inputExample" />
inline boolean '' Places the MDBRadio in one row <MDBRadio inline label="Example label" id="radioExample" />
inputRef React.RefObject undefined Reference to input element <MDBRadio inputRef={inputReference} />
label React.ReactNode '' Defines a label content for the MDBRadio <MDBRadio label="Example label" id="inputExample" />
labelId string '' Defines an id for the label <MDBRadio label="Example label" labelId="exampleLabel" id="radioExample" />
labelClass string '' Adds custom classes to the label <MDBRadio label="Example label" labelId="exampleLabel" labelClass="test-class" id="radioExample" />
labelStyle React.CSSProperties undefined Adds custom styles to the label <MDBRadio label="Example label" labelStyle={{color: 'red'}} />
name string '' Specifies the name for the MDBRadio <MDBRadio name="sampleName" label="Example label" id="inputExample" />
value string '' Sets the value for the MDBRadio <MDBRadio value="Example value" label="Example label" id="inputExample" />
wrapperTag string '' Defines a tag type for the wrapper of the MDBRadio <MDBRadio label="Example label" wrapperTag="span" id="exampleID" />
wrapperClass string '' Adds custom classes to the wrapper of the MDBRadio <MDBRadio wrapperClass="custom-class" label="Example label" id="radioExample" />
wrapperStyle React.CSSProperties undefined Adds custom styles to the wrapper <MDBRadio label="Example label" wrapperStyle={{color: 'red'}} />