React Radio

Radio

Radio buttons are typically used in groups where only one option can be selected.

All radio buttons in a group should share the same name attribute.

You control radio buttons based on whether the radio button's value matches the selected value in your state.

Example:

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyForm() {
  const [selectedFruit, setSelectedFruit] = useState('banana');

  const handleChange = (event) => {
    setSelectedFruit(event.target.value);
  };

  const handleSubmit = (event) => {
    alert(`Your favorite fruit is: ${selectedFruit}`);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <p>Select your favorite fruit:</p>
      <label>
        <input
          type="radio"
          name="fruit"
          value="apple"
          checked={selectedFruit === 'apple'}
          onChange={handleChange}
        /> Apple
      </label>
      <br />
      <label>
        <input
          type="radio"
          name="fruit"
          value="banana"
          checked={selectedFruit === 'banana'}
          onChange={handleChange}
        /> Banana
      </label>
      <br />
      <label>
        <input
          type="radio"
          name="fruit"
          value="cherry"
          checked={selectedFruit === 'cherry'}
          onChange={handleChange}
        /> Cherry
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);