React Radio Button Tutorial with Example

By Digamber Rawat Last updated on
Today In this React tutorial, we will explore how to work with Radio buttons in React app. Radio buttons are HTML elements and help the user to choose one option among two or more than two options. In this tutorial, we will learn how to use Radio buttons in React app. Using radio buttons in React is a little bit different than we use in regular HTML. However, we will learn the effortless way to integrate Radio buttons in React.

React Radio Button Example

In this React radio buttons tutorial, we are going to create a basic form in React component using render() method. This form will have five color options, among which a user can choose his favorite color. When a user clicks on the submit button, the radio button state will change.

Basic React App Set Up

Let’s start by installing and setting up the basic React app to show the radio buttons example.

npx create-react-app react-radio-buttons

Enter inside the `react-radio-buttons` project.

cd react-radio-buttons

Run the command to start the React app:

npm start

Define React Radio Button State

Firstly, we will set the radio buttons state. This Radio button state is being referred to as the user’s selection. We set defined the color variable in state and assign the empty (‘ ‘) value in it because the user will choose the color once the form is ready.

class App extends Component {

  constructor() {
    super();

    this.state = {
      color: ''
    };
  }

}

Build React Form with React Render Method

In this step, we will define the HTML form with radio buttons along with color values inside the render() method. This method will render 5 Radio buttons wrapped inside the Unordered Lists.

 render() {
    return (
      <div className="App">
        <form onSubmit={this.onSubmit}>
          <strong>Select Color:</strong>

          <ul>
            <li>
              <label>
                <input
                  type="radio"
                  value="red"
                  checked={this.state.color === "red"}
                  onChange={this.onRadioChange}
                />
                <span>Red</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="green"
                  checked={this.state.color === "green"}
                  onChange={this.onRadioChange}
                />
                <span>Green</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="blue"
                  checked={this.state.color === "blue"}
                  onChange={this.onRadioChange}
                />
                <span>Blue</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="orange"
                  checked={this.state.color === "orange"}
                  onChange={this.onRadioChange}
                />
                <span>Ornage</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="purple"
                  checked={this.state.color === "purple"}
                  onChange={this.onRadioChange}
                />
                <span>Purple</span>
              </label>
            </li>
          </ul>

          <button type="submit">Choose Color</button>
        </form>
      </div>
    );
  }

Let us understand what we did in the form. We defined color values in every radio button along with two properties checked and onChange.

The checked prop in our form is managing the selection of a radio button based on the radio button’s color state.

We are validating every radio buttons state with its respective value. When the value is checked, it will be set to true, and the radio button is considered to be selected. If the value is false, then the radio button will be in the unselected state.

How is it working?

Well, when a user clicks on any of the radio buttons from the defined group. Then we are updating the state via color variable using the onChange event handler.

Lastly, we declared the onSubmit event handler and attached with the onSubmit method to the main form. So when the user clicks on the submit button, then the radio buttons value gets updated.

Radio Button Selected State in React

We define the value of a Radio button with the state variable. It sets the selected value of a Radio button in React.

class App extends Component {

  constructor() {
    super();

    this.state = {
      color: 'green'
    };
  }

}

It will look something like this in your browser:

React Radio Button Selected State

Include Event Handler in React Form

In this step, we will include the event handler. This will set and update the sate of Radio button when a user clicks on the radio button.

  onRadioChange = (e) => {
    this.setState({
      color: e.target.value
    });
  }

The above method will update the color value of a Radio button when change by the user.

The Final Touch

In this final step we will define the onSubmit event handler to the form, this event will trigger when a user submits the form.

Use the event.preventDefault() method, it helps in fixes the page redirecting issue when a user clicks on the submit button.

import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

class App extends Component {

  constructor() {
    super();

    this.state = {
      color: 'green'
    };

    this.onRadioChange = this.onRadioChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

  }

  onRadioChange = (e) => {
    this.setState({
      color: e.target.value
    });
  }

  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.state);
  }

  render() {
    return (
      <div className="App">
        <form onSubmit={this.onSubmit}>
          <strong>Select Color:</strong>

          <ul>
            <li>
              <label>
                <input
                  type="radio"
                  value="red"
                  checked={this.state.color === "red"}
                  onChange={this.onRadioChange}
                />
                <span>Red</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="green"
                  checked={this.state.color === "green"}
                  onChange={this.onRadioChange}
                />
                <span>Green</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="blue"
                  checked={this.state.color === "blue"}
                  onChange={this.onRadioChange}
                />
                <span>Blue</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="orange"
                  checked={this.state.color === "orange"}
                  onChange={this.onRadioChange}
                />
                <span>Ornage</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="purple"
                  checked={this.state.color === "purple"}
                  onChange={this.onRadioChange}
                />
                <span>Purple</span>
              </label>
            </li>
          </ul>

          <button type="submit">Choose Color</button>
        </form>
      </div>
    );
  }
}

export default App;

Following will be the output:

React Radio Buttons

Click on the below button to get the full code of this project on GitHub repository.

Git Repo

The React Radio button tutorial with example is completed. Please share this tutorial with others.

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.

Hire Me