JIYIK CN >

Select a radio button by clicking its text in React:

1. Add a label element for each radio button.
2. The attribute of each label htmlForshould be set to the ID of each radio button.
3. Click the label element to select the radio button.

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>
  );
}

Each radio button has a corresponding label element.

htmlForIt is important to set the attribute of each label element to the id attribute of the radio button.

htmlForThe reason we have to use (instead of for) in React is because the for keyword is a reserved word - it is used for the for loop.

We can also wrap the radio buttons in corresponding tags.

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 wrap each radio button in its label.

Technically, as we wrapped each radio button in a label, we did not have to set htmlForthe attribute on the label element.

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

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>
  );
}

请注意, checking a radio button automatically unchecks all other radio buttons with the same name attribute.

If we hadn't assigned the same name attribute value to all the radio input fields in the group, we would be able to select multiple radio buttons at the same time.

If this is the behavior our use case requires, we should use checkboxes instead of radio buttons.