チェックボックスの制御

チェックボックスやラジオボタンの値は、useState を用いて状態として管理し、checked プロパティや onChange イベントを通して制御します。

import { useState } from "react";

export const ControlledCheckbox = () => {
  const [isAgreed, setIsAgreed] = useState(false);

  const handleChange = (e: React.ChangeEvent
<HTMLInputElement>) => {
    setIsAgreed(e.target.checked);
  };

  return (

<label>
      <input type="checkbox" checked={isAgreed} onChange={handleChange} />
      利用規約に同意する
    </label>
  );
};

• checked に useState で保持した値を渡します。
• onChange で e.target.checked を使い、状態を更新します。

複数チェックボックスの例（配列管理）

const fruits = ["apple", "banana", "orange"];

export const MultiCheckbox = () => {
  const [selectedFruits, setSelectedFruits] = useState<string[]>([]);

  const handleToggle = (value: string) => {
    setSelectedFruits((prev) =>
      prev.includes(value)
        ? prev.filter((v) => v !== value)
        : [...prev, value]
    );
  };

  return (

<div>
      {fruits.map((fruit) => (
        <label key={fruit}>
          <input
            type="checkbox"
            checked={selectedFruits.includes(fruit)}
            onChange={() => handleToggle(fruit)}
          />
          {fruit}
        </label>
      ))}

<p>選択された果物: {selectedFruits.join(", ")}</p>
    </div>
  );
};

• 選択済みアイテムを配列で管理することで、複数選択に対応できます。