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 { MDBContainer, MDBInput } from "mdbreact";
class InputPage extends React.Component {
state = {
radio: 2
}
onClick = (nr) => () => {
this.setState({
radio: nr
});
}
render() {
return (
<MDBContainer className="mt-5">
<MDBInput gap onClick={this.onClick(1)} checked={this.state.radio===1 ? true : false} label="Default unchecked" type="radio"
id="radio1" />
<MDBInput gap onClick={this.onClick(2)} checked={this.state.radio===2 ? true : false} label="Default checked" type="radio"
id="radio2" />
<MDBInput gap onClick={this.onClick(3)} checked={this.state.radio===3 ? true : false} label="Default unchecked disabled"
disabled type="radio" id="radio3" />
<MDBInput gap onClick={this.onClick(3)} checked={this.state.radio===2 ? true : false} label="Default checked disabled"
disabled type="radio" id="radio3" />
</MDBContainer>
);
}
}
export default InputPage;
Material Radio buttons
Material Design styling for Bootstrap radio button component
import React, { Component } from "react";
import { MDBContainer, MDBInput } from "mdbreact";
class InputPage extends Component {
state = {
radio: 2
}
onClick = nr => () => {
this.setState({
radio: nr
});
}
render() {
return (
<MDBContainer className="mt-5">
<MDBInput onClick={this.onClick(1)} checked={this.state.radio===1 ? true : false} label="Default unchecked" type="radio"
id="radio1" />
<MDBInput onClick={this.onClick(2)} checked={this.state.radio===2 ? true : false} label="Default checked" type="radio"
id="radio2" />
<MDBInput onClick={this.onClick(3)} checked={this.state.radio===3 ? true : false} label="Default unchecked disabled"
disabled type="radio" id="radio3" />
<MDBInput onClick={this.onClick(3)} checked={this.state.radio===2 ? true : false} label="Default checked disabled"
disabled type="radio" id="radio3" />
</MDBContainer>
);
}
}
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, { Component } from "react";
import { MDBInput } from "mdbreact";
class InputPage extends Component {
state = {
radio: 2
}
onClick = (nr) => () => {
this.setState({
radio: nr
});
}
render() {
return (
<MDBInput 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, { Component } from "react";
import { MDBInput } from "mdbreact";
class InputPage extends Component {
state = {
radio: true
}
onClick = () => {
this.setState({
radio: !this.state.radio
});
}
render() {
return (
<MDBInput onClick={this.onClick} checked={this.state.radio} 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, { Component } from "react";
import { MDBContainer, MDBInput } from "mdbreact";
class InputPage extends Component {
state = {
radio: 2
}
handleChange = nr => () => {
this.setState({
radio: nr
});
}
render() {
return (
<MDBContainer className="mt-5">
<MDBInput gap onChange={this.handleChange(3)} disabled checked={this.state.radio===3 ? true : false} label="Default unchecked disabled"
type="radio" id="radio3" />
<MDBInput gap onChange={this.handleChange(2)} disabled checked={this.state.radio===2 ? true : false} label="Default checked disabled"
type="radio" id="radio3" />
</MDBContainer>
);
}
}
export default InputPage;
Material radio button
import React from "react";
import { MDBContainer, MDBInput } from "mdbreact";
class InputPage extends React.Component {
state = {
radio: 2
}
onClick = nr => () => {
this.setState({
radio: nr
});
}
render() {
return (
<MDBContainer className="mt-5">
<MDBInput onClick={this.onClick(3)} checked={this.state.radio===3 ? true : false} label="Default unchecked disabled"
disabled type="radio" id="radio3" />
<MDBInput onClick={this.onClick(3)} checked={this.state.radio===2 ? true : false} label="Default checked disabled"
disabled type="radio" id="radio3" />
</MDBContainer>
);
}
}
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, { Component } from 'react';
import { MDBFormInline, MDBInput } from 'mdbreact';
class InputPage extends Component {
state = {
radio: ''
};
onClick = nr => () => {
this.setState({
radio: nr
});
};
render() {
return (
<MDBFormInline>
<MDBInput
gap
onClick={this.onClick(1)}
checked={this.state.radio === 1 ? true : false}
label='1'
type='radio'
id='radio1'
containerClass='mr-5'
/>
<MDBInput
gap
onClick={this.onClick(2)}
checked={this.state.radio === 2 ? true : false}
label='2'
type='radio'
id='radio2'
containerClass='mr-5'
/>
<MDBInput
gap
onClick={this.onClick(3)}
checked={this.state.radio === 3 ? true : false}
label='3'
type='radio'
id='radio3'
containerClass='mr-5'
/>
</MDBFormInline>
);
}
}
export default InputPage;
Material radio buttons
import React, { Component } from 'react';
import { MDBFormInline, MDBInput } from 'mdbreact';
class InputPage extends Component {
state = {
radio: 2
};
onClick = nr => () => {
this.setState({
radio: nr
});
};
render() {
return (
<MDBFormInline>
<MDBInput
onClick={this.onClick(1)}
checked={this.state.radio === 1 ? true : false}
label='1'
type='radio'
id='radio1'
containerClass='mr-5'
/>
<MDBInput
onClick={this.onClick(2)}
checked={this.state.radio === 2 ? true : false}
label='2'
type='radio'
id='radio2'
containerClass='mr-5'
/>
<MDBInput
onClick={this.onClick(3)}
checked={this.state.radio === 3 ? true : false}
label='3'
type='radio'
id='radio3'
containerClass='mr-5'
/>
</MDBFormInline>
);
}
}
export default InputPage;
Radio Button - API
In this section you will find advanced information about the React Radio Button component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use to work with it.
Import statement
In order to use Radio Button component make sure you have imported proper module first.
import React from 'react';
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 type="checkbox" filled /> |
gap |
Boolean | false |
Creates gap inside checkbox/radio button | <MDBInput type="checkbox" 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 font-awesome icon |
<MDBInput icon="caret-right" />
|
iconBrand |
Boolean | false |
Use this property to set brand icon (fab ) |
<MDBInput icon="twitter" iconBrand />
|
iconClassName |
String |
|
Adds custom classes to icon element |
<MDBInput icon="envelope" iconClassName="customClass" />
|
iconLight |
Boolean | false |
Use this property to set light icon (fal ) |
<MDBInput icon="twitter" iconLight />
|
iconRegular |
Boolean | false |
Use this property to set regular icon (far ) |
<MDBInput icon="twitter" iconRegular />
|
iconSize |
String |
|
Sets icon size |
<MDBInput icon="pencil-alt" size="5x" />
|
id |
String | Required! Set the id of the input element | <MDBInput id="myId" /> |
|
inputRef |
Function | Allows to attach React Ref to the input component; accepts only Callback Ref | <MDBInput inputRef={ref => this.myRef = ref } /> |
|
label |
String | Add label to the component; you can attach jsx elements (f.e. links) | <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 component | <MDBInput validate /> |
value |
String | The value of the input element (use with the controlled input) | <MDBInput value="I am controlled" onChange={this.handleChange} /> |
|
valueDefault |
String | The default value of the input (use with the uncontrolled input) | <MDBInput valueDefault="I am uncontrolled" /> |
API Reference: Methods
The table below shows the methods which you can use with MDBInput component.
Name | Parameters | Description | Example |
---|---|---|---|
getValue |
Method called on input change event; returns input value | <MDBInput getValue={this.getValue} /> |
|
onBlur |
Method called on blur event, the blur event is raised when an element loses focus; returns event object | <MDBInput onBlur={this.handleBlur} /> |
|
onChange |
Method called on change event; returns event object | <MDBInput onChange={this.handleChange} /> |
|
onFocus |
Method called on focus event, the focus event is raised when the user sets focus on en element; returns event object | <MDBInput onFocus={this.handleFocus} /> |
|
onInput |
Method called on input event; returns event object | <MDBInput onInput={this.handleInput} /> |