How to use radio buttons in React JS

React JS is a JavaScript framework used for building interfaces of single-page applications. Radio button is a significant element used in web application forms that allow users to select a specific option. In this Answer, we will look into how to use radio buttons, specifically in React.

Note: If you want to select multiple options, then consider using check boxes.

Syntax

• type: We fix the type to radio to make a radio button.

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

• value: We provide the radio button a value we want to get once the form is submitted.

In the following sections, we will see how to use defaultChecked and disabled attributes to select and disable a radio button, respectively.

The defaultChecked attribute

React JS allows us to mark a radio button checked as default using the defaultChecked attribute. We will see the working of the defaultChecked attribute in the code below.

The disabled attribute

React JS allows us to disable or make a radio button unclickable using the disabled attribute. If the disabled attribute is true, then the radio button is unclickable. We will see the working of the disabled attribute in the code below.

In line 8, we can not select Pizza because the disabled attribute is included within the input element.

Example

To give a clear idea of using radio buttons, we will use the example of a form that takes input from the user in the form of radio buttons.

Explanation

• Line 8: We create the state variable selectedOption.

• Line 11–14: We create onValueChange function that updates the value of selectedOption variable.

• 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 in line 77.

• Line 35–40: We create a radio button with the value attribute, checked attribute, and onChange function. The checked attribute's value depends on the value of selectedOption, and onChange function runs when the radio button is toggled.

• Line 46–54: We create a label and define a radio button with a value of Female in it.

• Line 58–66: We create a label and define a radio button with a value of Other in it.

• 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.

Conclusion

The radio button provides us with the functionality to choose one out of multiple options. We can add a radio button in React JS by specifying input tag's type attribute to radio. The disabled attribute allows disabling a radio button, and the defaultChecked attribute selects a radio button by default when the website loads for the first time.