問題一覧に戻る
中級フォーム処理
問題48: ラジオボタン

複数の選択肢から1つを選ぶラジオボタンの実装を学びます。同じname属性を持つラジオボタンがグループを形成し、その中から1つだけ選択できます。checked属性で選択状態を判定し、onChangeで新しい選択値を設定します。プラン選択、配送方法の選択など、相互排他的な選択が必要な場面で使用されます。各選択肢にはvalue属性で一意の値を設定し、stateと比較して選択状態を管理します。

import React, { useState } from 'react';

function Radio() {
  const [plan, setPlan] = useState("basic");

  return (
    <div>
      {/* ラジオボタングループ */}
      <input
        type=""
        ="plan"
        value="basic"
        ={plan === "basic"}
        ={() => setPlan("basic")}
      />
      Basic
      <input
        type="radio"
        name="plan"
        value="pro"
        checked={plan === "pro"}
        onChange={() => setPlan("pro")}
      />
      Pro
      <p>{plan}</p>
    </div>
  );
}

export default Radio;
···