Skip to content
react

How to work with radio buttons in React

Dec 3, 2021Abhishek EH2 Min Read
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:

radio large

If you have liked article, do follow me on twitter to get more real time updates!

Leave a Comment

© 2022 CodingDeft.Com