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