How to Use Radio Buttons in ReactJS

Nov 12, 2020 • 8 Minute Read

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:

          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>
    );
  }
    

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.

          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;
    

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.

          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>
    );
  }
    

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().

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

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().

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

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.

          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;
    

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

Explore these React courses from Pluralsight to continue learning: