How to work with radio buttons in React

Unlike checkboxes, radio buttons always come in groups. Let it be selecting your gender or choosing the size of the Pizza. In this article, we will see how to render radio buttons in react and how to know which radio button is selected.

First, let's create a component to display the radio buttons, which can be used to select the Pizza size:

App.js

1function App() {
2  return (
3    <div className="App">
4      <h3>Select Pizza Size</h3>
5
6      <input type="radio" name="topping" value="Regular" id="regular" />
7      <label htmlFor="regular">Regular</label>
8
9      <input type="radio" name="topping" value="Medium" id="medium" />
10      <label htmlFor="medium">Medium</label>
11
12      <input type="radio" name="topping" value="Large" id="large" />
13      <label htmlFor="large">Large</label>
14    </div>
15  )
16}
17
18export default App

Note that we have used the same name for all the radio buttons since they belong to a group and when an option is chosen, others get unselected.

We can pass checked as true to select an option by default. Let's make use of a local state to store the selected value.

App.js

1import { useState } from "react"
2
3function App() {
4  const [topping, setTopping] = useState("Medium")
5
6  return (
7    <div className="App">
8      <h3>Select Pizza Size</h3>
9
10      <input
11        type="radio"
12        name="topping"
13        value="Regular"
14        id="regular"
15        checked={topping === "Regular"}
16      />
17      <label htmlFor="regular">Regular</label>
18
19      <input
20        type="radio"
21        name="topping"
22        value="Medium"
23        id="medium"
24        checked={topping === "Medium"}
25      />
26      <label htmlFor="medium">Medium</label>
27
28      <input
29        type="radio"
30        name="topping"
31        value="Large"
32        id="large"
33        checked={topping === "Large"}
34      />
35      <label htmlFor="large">Large</label>
36    </div>
37  )
38}
39
40export default App

Here we are initializing the local state with the value 'Medium' so that it is selected by default.

If you try to change the option now, it will not work since we do not have any onChange handlers bound to the radio buttons. Let's add an onChange handler so that when the user changes the option, we can update it in the local state.

App.js

1import { useState } from "react"
2
3function App() {
4  const [topping, setTopping] = useState("Medium")
5
6  const onOptionChange = e => {
7    setTopping(e.target.value)
8  }
9
10  return (
11    <div className="App">
12      <h3>Select Pizza Size</h3>
13
14      <input
15        type="radio"
16        name="topping"
17        value="Regular"
18        id="regular"
19        checked={topping === "Regular"}
20        onChange={onOptionChange}
21      />
22      <label htmlFor="regular">Regular</label>
23
24      <input
25        type="radio"
26        name="topping"
27        value="Medium"
28        id="medium"
29        checked={topping === "Medium"}
30        onChange={onOptionChange}
31      />
32      <label htmlFor="medium">Medium</label>
33
34      <input
35        type="radio"
36        name="topping"
37        value="Large"
38        id="large"
39        checked={topping === "Large"}
40        onChange={onOptionChange}
41      />
42      <label htmlFor="large">Large</label>
43
44      <p>
45        Select topping <strong>{topping}</strong>
46      </p>
47    </div>
48  )
49}
50
51export default App

Now if you select the topping as 'Large', you should be able to see it displayed below:

Do follow me on twitter where I post developer insights more often!

How to work with radio buttons in React

Related Articles

Leave a Comment

Tools