React Radio Buttons

Implementing radio buttons in React forms

🔘 What are Radio Buttons?

Radio buttons let users select only one option from a group. Unlike checkboxes, only one radio button can be selected at a time within the same group. 


const [selected, setSelected] = useState('option1');

Understanding Radio Buttons

Radio buttons are perfect when users need to choose exactly one option from multiple choices. They work as a group where selecting one automatically deselects others. React manages radio buttons using a single state variable to track the selected value.

1️⃣

Single Selection

Only one option at a time

👥

Grouped Options

Related choices together

🎯

Controlled Input

React manages selection state

🔄

Dynamic Options

Generate from data arrays

🔹 Basic Radio Buttons

Create a simple radio button group with a single state variable: 

import { useState } from 'react';

function GenderSelector() {
  const [gender, setGender] = useState('');

  return (
    <div>
      <h3>Select Gender:</h3>
      <label>
        <input
          type="radio"
          value="male"
          checked={gender === 'male'}
          onChange={(e) => setGender(e.target.value)}
        />
        Male
      </label>
      <label>
        <input
          type="radio"
          value="female"
          checked={gender === 'female'}
          onChange={(e) => setGender(e.target.value)}
        />
        Female
      </label>
      <label>
        <input
          type="radio"
          value="other"
          checked={gender === 'other'}
          onChange={(e) => setGender(e.target.value)}
        />
        Other
      </label>
      <p>Selected: {gender || 'None'}</p>
    </div>
  );
}

Output:

Select Gender:

Selected: None

🔹 Dynamic Radio Buttons

Generate radio buttons from an array of options: 

import { useState } from 'react';

function SizeSelector() {
  const sizes = ['Small', 'Medium', 'Large', 'X-Large'];
  const [selectedSize, setSelectedSize] = useState('Medium');

  return (
    <div>
      <h3>Choose Size:</h3>
      {sizes.map(size => (
        <label key={size}>
          <input
            type="radio"
            value={size}
            checked={selectedSize === size}
            onChange={(e) => setSelectedSize(e.target.value)}
          />
          {size}
        </label>
      ))}
      <p>You selected: {selectedSize}</p>
    </div>
  );
}

Output:

Choose Size:

You selected: Medium

🔹 Radio Buttons with Objects

Use objects for more complex radio button data: 

import { useState } from 'react';

function PaymentMethod() {
  const methods = [
    { id: 1, name: 'Credit Card', fee: 0 },
    { id: 2, name: 'PayPal', fee: 2.99 },
    { id: 3, name: 'Bank Transfer', fee: 0 }
  ];
  
  const [selected, setSelected] = useState(methods[0]);

  return (
    <div>
      <h3>Payment Method:</h3>
      {methods.map(method => (
        <label key={method.id}>
          <input
            type="radio"
            checked={selected.id === method.id}
            onChange={() => setSelected(method)}
          />
          {method.name} 
          {method.fee > 0 && `(+$${method.fee})`}
        </label>
      ))}
      <p>Selected: {selected.name}</p>
      <p>Fee: ${selected.fee}</p>
    </div>
  );
}

Key Points:

  • All radio buttons in a group share the same name attribute
  • Use checked prop to control which button is selected
  • The value prop identifies each option
  • Only one radio button can be selected at a time

🔹 Radio Buttons in Forms

Integrate radio buttons into a complete form: 

import { useState } from 'react';

function SurveyForm() {
  const [formData, setFormData] = useState({
    name: '',
    satisfaction: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Your Name"
        value={formData.name}
        onChange={(e) => setFormData({
          ...formData,
          name: e.target.value
        })}
      />
      
      <h4>How satisfied are you?</h4>
      {['Very Satisfied', 'Satisfied', 'Neutral', 'Unsatisfied'].map(option => (
        <label key={option}>
          <input
            type="radio"
            value={option}
            checked={formData.satisfaction === option}
            onChange={(e) => setFormData({
              ...formData,
              satisfaction: e.target.value
            })}
          />
          {option}
        </label>
      ))}
      
      <button type="submit">Submit Survey</button>
    </form>
  );
}

🧠 Test Your Knowledge

How many radio buttons can be selected at once in a group?