How to Use Radio Buttons in React

Radio buttons are used when you have a list of 2 or more options, and you want the user to select exactly one of them.

The way we use radio buttons in React is different from the way we usually do it in HTML, but is easy to understand and set up.

In this tutorial, we’re going to make a simple pizza size picker. The user can choose between 3 different options, and when he clicks the submit button, we’ll display his selection in an alert box.

Basic setup

We start by setting up the basics of our React component.

We will store the user’s selection in the state, and since nothing should be selected to begin with, we start by setting the state variable to an empty string:

class PizzaSizePicker extends React.Component {
  constructor() {
    super();
    
    this.state = {
      size: ''
    };
  }
}

If we instead wanted one of the radio buttons to be selected by default, we would simply set the state variable to the value of that radio button.

Adding the form

Now we add our render() method, which will return a form with 3 radio buttons:

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <p>Select a pizza size:</p>
      
      <ul>
        <li>
          <label>
            <input
              type="radio"
              value="small"
              checked={this.state.size === "small"}
              onChange={this.handleChange}
            />
            Small
          </label>
        </li>
        
        <li>
          <label>
            <input
              type="radio"
              value="medium"
              checked={this.state.size === "medium"}
              onChange={this.handleChange}
            />
            Medium
          </label>
        </li>

        <li>
          <label>
            <input
              type="radio"
              value="large"
              checked={this.state.size === "large"}
              onChange={this.handleChange}
            />
            Large
          </label>
        </li>
      </ul>

      <button type="submit">Make your choice</button>
    </form>
  );
}

We give each radio button a value, as well as two other props: checked and onChange.

By adding the checked property to the radio buttons, we make them controlled components. This means that we will control whether or not a radio button is selected, based on the state.

Each radio button checks to see if the value in the state matches their value. If it does, checked will be set to true and the radio button will be selected. If not, checked will be set to false and it will not be selected.

In normal HTML, we would give each radio button a name attribute set to the same value, to tell the browser that they belong to a group of related radio buttons. This would make sure that only one radio button could be selected at a time. However, we don’t need the name attribute with our approach. Since the state can only contain one of the values, only one radio button can be selected at a time.

When someone clicks one of the radio buttons, we want to update the state variable. By adding the onChange property, we tell the radio button which event handler to use if someone clicks that radio button.

We have also added an onSubmit property to the form element, to tell it which event handler to use when someone submits the form.

Adding the event handlers

Let’s add the event handlers we just referenced. First we’ll add the event handler that will be called when someone clicks a radio button:

handleChange(event) {
  this.setState({
    size: event.target.value
  });
}

Here we simply update the state variable to the value of the selected radio button.

Then we add the event handler called when someone clicks the submit button:

handleSubmit(event) {
  event.preventDefault();
  
  alert(`You chose the ${this.state.size} pizza.`);
}

It will prevent the default behavior of redirecting away from the page, and display an alert box with the user’s selection.

We must also remember to bind the event handlers in the constructor, to make sure they have the correct this value:

constructor() {
  // ...
  
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

There you go! Our component is done.

Here is our finished example, with some added styling:

See the Pen Radio buttons in React by Magnus (@magnusb) on CodePen.