Author avatar

Gaurav Singhal

How to Use Radio Buttons in ReactJS

Gaurav Singhal

  • Nov 12, 2020
  • 8 Min read
  • 490,764 Views
  • Nov 12, 2020
  • 8 Min read
  • 490,764 Views
Web Development
Front End Web Development
Client-side Framework
React
Introduction

Introduction

While working with a web app, you might need to use various form controls such as text boxes, checkboxes, dropdowns, file uploads, or radio buttons in order to use HTML elements or third-party libraries for React, such as material-ui.

In this guide, you'll learn the basics of the radio button, how to use it in a group, and how to access the selected radio button value on change event.

Using a Radio Button Group

Radio buttons let a user choose a single option from a list of multiple radio buttons and submit its value.

For example, here's how to use radio buttons without a form:

1render() {
2    return (
3      <div>
4        <input type="radio" value="Male" name="gender" /> Male
5        <input type="radio" value="Female" name="gender" /> Female
6        <input type="radio" value="Other" name="gender" /> Other
7      </div>
8    );
9  }
jsx

In this example, there are three radio buttons and one additional property called gender.

Because that name property puts all the radio buttons into a group, you can get the value once the user selects any of them, as explained below.

1import React, { Component } from "react";
2
3class Demo1 extends Component {
4  constructor() {
5    super();
6    this.state = {
7      name: "React"
8    };
9    this.onChangeValue = this.onChangeValue.bind(this);
10  }
11
12  onChangeValue(event) {
13    console.log(event.target.value);
14  }
15
16  render() {
17    return (
18      <div onChange={this.onChangeValue}>
19        <input type="radio" value="Male" name="gender" /> Male
20        <input type="radio" value="Female" name="gender" /> Female
21        <input type="radio" value="Other" name="gender" /> Other
22      </div>
23    );
24  }
25}
26
27export default Demo1;
jsx

The function onChangeValue() is attached with div so as soon as the user selects any radio button, it will be reflected in the function.

Using a Radio Button Group with a Form

The previous example used radio buttons with a change action, but you can also use radio button groups with a form.

Set up a form with a radio button group like this.

1  render() {
2    return (
3      <form onSubmit={this.formSubmit}>
4        <div className="radio">
5          <label>
6            <input
7              type="radio"
8              value="Male"
9              checked={this.state.selectedOption === "Male"}
10              onChange={this.onValueChange}
11            />
12            Male
13          </label>
14        </div>
15        <div className="radio">
16          <label>
17            <input
18              type="radio"
19              value="Female"
20              checked={this.state.selectedOption === "Female"}
21              onChange={this.onValueChange}
22            />
23            Female
24          </label>
25        </div>
26        <div className="radio">
27          <label>
28            <input
29              type="radio"
30              value="Other"
31              checked={this.state.selectedOption === "Other"}
32              onChange={this.onValueChange}
33            />
34            Other
35          </label>
36        </div>
37        <div>
38          Selected option is : {this.state.selectedOption}
39        </div>
40        <button className="btn btn-default" type="submit">
41          Submit
42        </button>
43      </form>
44    );
45  }
jsx

As you can see in the above example, in the form there are three different radio buttons along with the submit button, and each radio button is attached with one onChange function, called onValueChange().

1onValueChange(event) {
2    this.setState({
3      selectedOption: event.target.value
4    });
5  }
jsx

The onChangeValue() function gets called when the user selects the radio button from the group, and the value is updated into the component state.

When the user is done with the selection, they may want to submit the form. The submit method is called formSubmit().

1formSubmit(event) {
2    event.preventDefault();
3    console.log(this.state.selectedOption)
4  }
jsx

Once the user submits the form, pass the state values to the API endpoint to post or update the data.

The complete example should look like this.

1import React, { Component } from "react";
2
3class Demo2 extends Component {
4  constructor() {
5    super();
6    this.state = {
7      name: "React"
8    };
9    this.onValueChange = this.onValueChange.bind(this);
10    this.formSubmit = this.formSubmit.bind(this);
11  }
12
13  onValueChange(event) {
14    this.setState({
15      selectedOption: event.target.value
16    });
17  }
18
19  formSubmit(event) {
20    event.preventDefault();
21    console.log(this.state.selectedOption)
22  }
23
24  render() {
25    return (
26      <form onSubmit={this.formSubmit}>
27        <div className="radio">
28          <label>
29            <input
30              type="radio"
31              value="Male"
32              checked={this.state.selectedOption === "Male"}
33              onChange={this.onValueChange}
34            />
35            Male
36          </label>
37        </div>
38        <div className="radio">
39          <label>
40            <input
41              type="radio"
42              value="Female"
43              checked={this.state.selectedOption === "Female"}
44              onChange={this.onValueChange}
45            />
46            Female
47          </label>
48        </div>
49        <div className="radio">
50          <label>
51            <input
52              type="radio"
53              value="Other"
54              checked={this.state.selectedOption === "Other"}
55              onChange={this.onValueChange}
56            />
57            Other
58          </label>
59        </div>
60        <div>
61          Selected option is : {this.state.selectedOption}
62        </div>
63        <button className="btn btn-default" type="submit">
64          Submit
65        </button>
66      </form>
67    );
68  }
69}
70
71export default Demo2;
jsx

This complete example used a radio button group with the form. As soon as the user submits the form, the value will be used for the API endpoint communication. The checked property of the radio button is responsible to selected it once it finds the suitable value from the current state.

Radio Buttons from Third-party Libraries

You can use HTML input with the type as radio button. If you need to use different styling, make use of some third-party libraries that provide radio button elements:

  • material-ui
  • react-radio-buttons
  • react-radio-button
  • react-radio-button-group
  • react-radio-group

Conclusion

This guide explained how to use radio buttons as a group, how to use them with a form element, and where to find radio buttons from various third-party sources.

That’s the power of managing forms with radio button groups. If you have any queries, feel free to reach out at Codealphabet.

LEARN MORE