Select a Radio button by clicking on its Text in React

avatar

Borislav Hadzhiev

Last updated: Apr 23, 2022

banner

Photo from Unsplash

Select a Radio button by clicking on its Text in React #

To select a radio button by clicking on its text in React:

  1. Add a label element for each radio button.
  2. The htmlFor prop of each label should be set to the id of each radio button.
  3. Click on the label element to select the radio button.
App.js
import React, {useState} from 'react'; export default function App() { const [selected, setSelected] = useState('yes'); const handleChange = event => { console.log(event.target.value); setSelected(event.target.value); }; return ( <div> <div> <input type="radio" id="yes" name="choose" value="yes" checked={selected === 'yes'} onChange={handleChange} /> <label htmlFor="yes">Yes</label> <input type="radio" id="no" name="choose" value="no" onChange={handleChange} checked={selected === 'no'} /> <label htmlFor="no">No</label> <input type="radio" id="maybe" name="choose" value="maybe" onChange={handleChange} checked={selected === 'maybe'} /> <label htmlFor="maybe">Maybe</label> </div> </div> ); }

radio button label click

Each radio button has a corresponding label element.

It's important to set the htmlFor prop of each label element to the id prop of the radio button.

The reason we have to use htmlFor (instead of for) in React is because the for keyword is a reserved word - it's used in for loops.

You can also wrap the radio buttons in their corresponding label.

App.js
import React, {useState} from 'react'; export default function App() { const [selected, setSelected] = useState('yes'); const handleChange = event => { console.log(event.target.value); setSelected(event.target.value); }; return ( <div> <div> <label htmlFor="yes"> <input type="radio" id="yes" name="choose" value="yes" checked={selected === 'yes'} onChange={handleChange} /> Yes </label> <label htmlFor="no"> <input type="radio" id="no" name="choose" value="no" onChange={handleChange} checked={selected === 'no'} /> No </label> <label htmlFor="maybe"> <input type="radio" id="maybe" name="choose" value="maybe" onChange={handleChange} checked={selected === 'maybe'} /> Maybe </label> </div> </div> ); }

The code snippet achieves the same result, but we wrapped each radio button in its label.

Technically, it's not necessary for us to set the htmlFor prop on the label elements when we wrap each radio button in a label.

The following example removes the htmlFor prop from each label element and clicking on the radio button's text still selects it.

App.js
import React, {useState} from 'react'; export default function App() { const [selected, setSelected] = useState('yes'); const handleChange = event => { console.log(event.target.value); setSelected(event.target.value); }; return ( <div> <div> <label> <input type="radio" id="yes" name="choose" value="yes" checked={selected === 'yes'} onChange={handleChange} /> Yes </label> <label> <input type="radio" id="no" name="choose" value="no" onChange={handleChange} checked={selected === 'no'} /> No </label> <label> <input type="radio" id="maybe" name="choose" value="maybe" onChange={handleChange} checked={selected === 'maybe'} /> Maybe </label> </div> </div> ); }
Note that checking a radio button, automatically unchecks all other radio buttons with the same name prop.

If you don't assign the same name prop value to all of the radio input fields in the group, you will be able to check multiple radio buttons at the same time.

If this is the behavior your use case requires, you should be using a checkbox instead of a radio button.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.