Rate this docs

React Bootstrap Radio buttons MDB Pro component

React Radio buttons - Bootstrap 4 & Material Design

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.


Basic examples

Default styling for Bootstrap radio button component


              import React from "react";
              import { Container, Input } from "mdbreact";

              class InputPage extends React.Component {
                state = {
                  radio: 2
                }

                onClick = (nr) => {
                  this.setState({
                    radio: nr
                  });
                }

                render() {
                  return (
                    <Container className="mt-5">
                        <Input
                          gap
                          onClick={() => this.onClick(1)}
                          checked={this.state.radio === 1 ? true : false}
                          label="Default unchecked"
                          type="radio"
                          id="radio1"
                        />
                        <Input
                          gap
                          onClick={() => this.onClick(2)}
                          checked={this.state.radio === 2 ? true : false}
                          label="Default checked"
                          type="radio"
                          id="radio2"
                        />
                        <Input
                          gap
                          onClick={() => this.onClick(3)}
                          checked={this.state.radio === 3 ? true : false}
                          label="Default unchecked disabled"
                          disabled
                          type="radio"
                          id="radio3"
                        />
                        <Input
                          gap
                          onClick={() => this.onClick(3)}
                          checked={this.state.radio === 2 ? true : false}
                          label="Default checked disabled"
                          disabled
                          type="radio"
                          id="radio3"
                        />
                      </Container>
                  );
                }
              }

              export default InputPage;
          

Material Radio buttons

Material Design styling for Bootstrap radio button component


              import React from "react";
              import { Container, Input } from "mdbreact";

              class InputPage extends React.Component {
                state = {
                  radio: 2
                }

                onClick = (nr) => {
                  this.setState({
                    radio: nr
                  });
                }

                render() {
                  return (
                    <Container className="mt-5">
                        <Input
                          onClick={() => this.onClick(1)}
                          checked={this.state.radio === 1 ? true : false}
                          label="Default unchecked"
                          type="radio"
                          id="radio1"
                        />
                        <Input
                          onClick={() => this.onClick(2)}
                          checked={this.state.radio === 2 ? true : false}
                          label="Default checked"
                          type="radio"
                          id="radio2"
                        />
                        <Input
                          onClick={() => this.onClick(3)}
                          checked={this.state.radio === 3 ? true : false}
                          label="Default unchecked disabled"
                          disabled
                          type="radio"
                          id="radio3"
                        />
                        <Input
                          onClick={() => this.onClick(3)}
                          checked={this.state.radio === 2 ? true : false}
                          label="Default checked disabled"
                          disabled
                          type="radio"
                          id="radio3"
                        />
                      </Container>
                  );
                }
              }

              export default InputPage;
          

Checked state

Add checked prop to the <Input> component to pre-select radio button when the page loads. The checked prop is a boolean attribute.The checked attribute can be used with <Input type="radio"> and <Input type="checkbox">.

Default radio buttons


              import React from "react";
              import { Input } from "mdbreact";

              class InputPage extends React.Component {
                state = {
                  radio: 2
                }

                onClick = (nr) => {
                  this.setState({
                    radio: nr
                  });
                }

                render() {
                  return (

                    <Input
                      gap
                      onClick={() => this.onClick(2)}
                      checked={this.state.radio === 2 ? true : false}
                      label="Default checked"
                      type="radio"
                      id="radio2"
                    />

                  );
                }
              }

              export default InputPage;

          

Material radio buttons


              import React from "react";
              import { Input } from "mdbreact";

              class InputPage extends React.Component {
                state = {
                  radio: 2
                }

                onClick = (nr) => {
                  this.setState({
                    radio: nr
                  });
                }

                render() {
                  return (

                    <Input
                      onClick={() => this.onClick(2)}
                      checked={this.state.radio === 2 ? true : false}
                      label="Default checked"
                      type="radio"
                      id="radio2"
                    />

                  );
                }
              }

              export default InputPage;
          

Disabled state

Add the disabled boolean attribute to the <Input> component and the custom indicator and label description will be automatically styled and blocked. A disabled <Input> component is unusable and un-clickable.

Default radio button


              import React from "react";
              import { Container, Input } from "mdbreact";

              class InputPage extends React.Component {
                state = {
                  radio: 2
                }

                onClick = (nr) => {
                  this.setState({
                    radio: nr
                  });
                }

                render() {
                  return (
                    <Container className="mt-5">
                        <Input
                          onClick={() => this.onClick(3)}
                          checked={this.state.radio === 3 ? true : false}
                          label="Default unchecked disabled"
                          disabled
                          type="radio"
                          id="radio3"
                        />
                        <Input
                          onClick={() => this.onClick(3)}
                          checked={this.state.radio === 2 ? true : false}
                          label="Default checked disabled"
                          disabled
                          type="radio"
                          id="radio3"
                        />
                      </Container>
                  );
                }
              }

              export default InputPage;

          

Material radio button


              import React from "react";
              import { Container, Input } from "mdbreact";

              class InputPage extends React.Component {
                state = {
                  radio: 2
                }

                onClick = (nr) => {
                  this.setState({
                    radio: nr
                  });
                }

                render() {
                  return (
                    <Container className="mt-5">
                        <Input
                          onClick={() => this.onClick(3)}
                          checked={this.state.radio === 3 ? true : false}
                          label="Default unchecked disabled"
                          disabled
                          type="radio"
                          id="radio3"
                        />
                        <Input
                          onClick={() => this.onClick(3)}
                          checked={this.state.radio === 2 ? true : false}
                          label="Default checked disabled"
                          disabled
                          type="radio"
                          id="radio3"
                        />
                      </Container>
                  );
                }
              }

              export default InputPage;
          

Inline

Group radio buttons or checkboxes on the same horizontal row by wraping <Input> components in <FormInline> component.

Default radio buttons



              import React from "react";
              import { FormInline, Input } from "mdbreact";

              class InputPage extends React.Component {
                state = {
                  radio: 2
                }

                onClick = (nr) => {
                  this.setState({
                    radio: nr
                  });
                }

                render() {
                  return (
                      <FormInline>
                        <Input
                          gap
                          onClick={() => this.onClick(1)}
                          checked={this.state.radio === 1 ? true : false}
                          label="Default unchecked disabled"
                          disabled
                          type="radio"
                          id="radio1"
                        />
                        <Input
                          gap
                          onClick={() => this.onClick(2)}
                          checked={this.state.radio === 2 ? true : false}
                          label="Default checked disabled"
                          disabled
                          type="radio"
                          id="radio2"
                        />
                        <Input
                          gap
                          onClick={() => this.onClick(3)}
                          checked={this.state.radio === 3 ? true : false}
                          label="Default checked disabled"
                          disabled
                          type="radio"
                          id="radio3"
                        />
                      </FormInline>
                  );
                }
              }

              export default InputPage;

          

Material radio buttons



              import React from "react";
              import { FormInline, Input } from "mdbreact";

              class InputPage extends React.Component {
                state = {
                  radio: 2
                }

                onClick = (nr) => {
                  this.setState({
                    radio: nr
                  });
                }

                render() {
                  return (
                      <FormInline>
                        <Input
                          onClick={() => this.onClick(1)}
                          checked={this.state.radio === 1 ? true : false}
                          label="Default unchecked disabled"
                          disabled
                          type="radio"
                          id="radio1"
                        />
                        <Input
                          onClick={() => this.onClick(2)}
                          checked={this.state.radio === 2 ? true : false}
                          label="Default checked disabled"
                          disabled
                          type="radio"
                          id="radio2"
                        />
                        <Input
                          onClick={() => this.onClick(3)}
                          checked={this.state.radio === 3 ? true : false}
                          label="Default checked disabled"
                          disabled
                          type="radio"
                          id="radio3"
                        />
                      </FormInline>
                  );
                }
              }

              export default InputPage;

          

React Radio buttons - API

In this section you will find advanced information about the Input component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Input import statement

In order to use Radio button component make sure you have imported proper module first.


            import { MDBInput } from 'mdbreact';
        

API Reference: Properties

The table below shows the configuration options of the MDBInput component.

Name Type Default Description Example
checked Boolean false Pre-selects checkbox/radio button when the page loads. <MDBInput checked />
className String Adds custom class to Input component <MDBInput className="myClass" />
containerClass String Adds custom class to wrapping div <MDBInput containerClass="wrapper" />
disabled Boolean false Disables input component <MDBInput disabled />
error String Sets the error message for the labels data-error attribute <MDBInput error="Whoops!" />
filled Boolean false Add filled-in style to checkbox/radio button <MDBInput filled />
gap Boolean false Creates gap inside checkbox/radio button <MDBInput gap />
group Boolean false Add .form-group class to the wrapping div <MDBInput group />
hint String Sets the placeholder for the Input <MDBInput hint="Placeholder" />
icon String Adds icon prefix to the Input component <MDBInput icon="envelope" />
iconClass String Adds custom class to icon element <MDBInput className="iconRed" />
id String Required! The id of the input element <MDBInput id="myId" />
label String Add label to the component <MDBInput label="My custom input" />
labelClass String Adds custom class to the label <MDBInput labelClass="labelCustomClass" />
size String Changes size of the component; available lg and sm <MDBInput size="sm" />
success String Sets the success message for the labels data-success attribute <MDBInput success="Yeah!" />
tag String input Changes default input tag <MDBInput tag="div" />
type String text The type of the input element <MDBInput type="checkbox" />
validate Boolean false Adds .validate class to the Input comonent <MDBInput validate />
value String The value of the input element <MDBInput value="2018" />

API Reference: Methods

The table below shows the methods which you can use with MDBInput component.

Name Parameters Description Example
getValue Returns MDBInput value on change <MDBInput getValue="this.handleChange">