How to display selected radio button value in another textbox in React?

Question

How to display selected radio button value in another textbox in React?

Answer

Use useState to store the selected radio button’s value and bind it to another input.

import { useState } from 'react';

function RadioDisplay() {
  const [selected, setSelected] = useState('');

  const roles = ['Admin', 'Editor', 'Viewer'];

  return (
    <div>
      {roles.map((role, i) => (
        <label key={i}>
          <input
            type='radio'
            value={role}
            checked={selected === role}
            onChange={(e) => setSelected(e.target.value)}
          />
          {role}
        </label>
      ))}

      <input type='text' value={selected} readOnly />
    </div>
  );
}

Whenever the user selects a radio button, the selected state updates — and that value instantly appears in the textbox.

Real-World Example

• Displaying user’s selected preferences.
• Mirroring form input to a review field.

Quick Practice

Create a “Select Department” radio list and display the chosen department in a read-only input below.

Summary

Use one shared state to store the selected value and display it anywhere you need.