How to use radio buttons in React JS

React.js is a powerful JavaScript framework used for building the user interfaces of single-page applications. The radio button is a significant element used in web application forms that allow users to select a specific option from a group. In this Answer, we’ll look into how to use radio buttons in React.js, including setting default values, handling selections, and disabling options.

Note: If you need to select multiple options, consider using checkboxes instead.

The syntax for radio buttons in React JS

The syntax for the radio button in React is the following:

where:

• type: Set this attribute to radio to create a radio button.

• name: Use name to define a group of radio buttons. A group is a collection of radio buttons with the same name, allowing only one option in the group to be selected at a time.

• value: This sets the value that will be retrieved once the form is submitted.

In the following sections, we’ll cover how to use the defaultChecked and disabled attributes in React to select and disable radio buttons by default.

The defaultChecked attribute

React.js allows us to mark a radio button as checked by default using the defaultChecked attribute. This example demonstrates how to set up a default radio button selection in React.

In the above App.js file:

• Line 8: The defaultChecked attribute on the Pizza option makes it the default selection when the form loads. Other options remain unselected.

The disabled attribute

React JS also allows us to disable a radio button, making it unclickable using the disabled attribute. When disabled is set to true, the radio button becomes inactive. We will see the working of the disabled attribute in the following example.

In the above App.js file:

• Line 8: The Pizza option is unselectable because the disabled attribute is applied to the input element.

Handling radio button selection in React

To give a clear idea of using radio buttons in React, here’s an example of a form that uses radio buttons to capture a user’s selected color. We’ll use useState to manage the selected radio button in React.

Code explanation

In the above App.js file:

• Line 8: We create the state variable selectedOption to store the user’s selection.

• Line 11–14: We create onValueChange function that updates the value of selectedOption when a radio button is selected.

• Line 17–26: We create formSubmit function that prevents the page from reloading. It also logs the value of selectedOption and shows an alert message of the selectedOption on submission of the form.

• Line 30: We create a form with the onSubmit function. The function runs once the submit button is clicked on line 77.

• Line 35–40: We create a radio button for Blue, controlled by the checked attribute.

• Line 47–52: Similar setup for the Green radio button.

• Line 59–64: Similar setup for the Pink radio button.

• Line 71–73: We create a div and write the text Selected option is: along with the variable selectedOption.

• Line 77–79: We create a button of type submit. Once we click the button, the form gets submitted.

Knowledge test

Let’s attempt a short quiz to assess your understanding.

Conclusion

Radio buttons in React.js provide functionality to choose one option from multiple choices. We can add a radio button in React by setting the input tag’s type attribute to radio. Use disabled to make a radio button unclickable, and defaultChecked to set a default selection when the page first loads. By handling state with useState, we can easily manage and display the selected radio button in React, making forms more interactive and user-friendly.

If you’re looking to dive deeper into React, consider reading the detailed blog, “Five best practices for React developers.” This guide provides foundational insights that will enhance your React skills and set you up for greater success in building interactive and efficient applications.