Author avatar

Gaurav Singhal

How to Use Radio Buttons in ReactJS

Gaurav Singhal

  • Mar 27, 2020
  • 7 Min read
  • 13,216 Views
  • Mar 27, 2020
  • 7 Min read
  • 13,216 Views
Web Development
Front End Web Development
Client-side Framework
React

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:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { Component } from "react";

class Demo1 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
    this.onChangeValue = this.onChangeValue.bind(this);
  }

  onChangeValue(event) {
    console.log(event.target.value);
  }

  render() {
    return (
      <div onChange={this.onChangeValue}>
        <input type="radio" value="Male" name="gender" /> Male
        <input type="radio" value="Female" name="gender" /> Female
        <input type="radio" value="Other" name="gender" /> Other
      </div>
    );
  }
}

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

1
2
3
4
5
onValueChange(event) {
    this.setState({
      selectedOption: event.target.value
    });
  }
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().

1
2
3
4
formSubmit(event) {
    event.preventDefault();
    console.log(this.state.selectedOption)
  }
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React, { Component } from "react";

class Demo2 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
    this.onValueChange = this.onValueChange.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  onValueChange(event) {
    this.setState({
      selectedOption: event.target.value
    });
  }

  formSubmit(event) {
    event.preventDefault();
    console.log(this.state.selectedOption)
  }

  render() {
    return (
      <form onSubmit={this.formSubmit}>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="Male"
              checked={this.state.selectedOption === "Male"}
              onChange={this.onValueChange}
            />
            Male
          </label>
        </div>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="Female"
              checked={this.state.selectedOption === "Female"}
              onChange={this.onValueChange}
            />
            Female
          </label>
        </div>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="Other"
              checked={this.state.selectedOption === "Other"}
              onChange={this.onValueChange}
            />
            Other
          </label>
        </div>
        <div>
          Selected option is : {this.state.selectedOption}
        </div>
        <button className="btn btn-default" type="submit">
          Submit
        </button>
      </form>
    );
  }
}

export 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. I hope this guide was helpful to you.

30