React+mapでラジオボタン、丸を大きくした

React、mapでラジオボタンを実装したときのメモです。
・配列で選択肢を定義し、mapで回してレンダリング
・Typescript
・シニア向けのデザインだったのでラジオボタンの文字と丸を大きく
・今回はOKボタン押したときにアラートで選択したものを表示

import { useState } from "react";
import "./Test3.css";

export const Test3 = () => {
  const data = [
    { id: 0, message: "選択肢１" },
    { id: 1, message: "選択肢２" },
    { id: 2, message: "選択肢３" },
  ];

  //選択肢１が初期値
  const [radioButtonNumber, setRadioButtonNumber] = useState<number>(0);

  const radioButtonChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
    setRadioButtonNumber(Number(e.target.value));
  };

  const buttonClicked = () => {
    alert(`${data[radioButtonNumber].message}`);
  };

  return (
    <>
      <div className="RadioButtonArea">
        {data.map((val) => (
          <label className="test3Label" key={val.id}>
            <input
              className="test3Input"
              type="radio"
              name="name1"
              value={val.id}
              checked={radioButtonNumber === val.id}
              onChange={radioButtonChanged}
            />
            {val.message}
          </label>
        ))}
      </div>
      <button className="test3Button" onClick={buttonClicked}>
        OK
      </button>
    </>
  );
};

シニア向けに文字を大きくしてもラジオボタンの丸は大きくならなかった。

inputのcssで丸を大きくすると、丸の位置がおかしくなった。

input {
  transform: scale(2.5);
}

translateとmarginで位置を調整。

input {
  transform: translate(0%, -35%) scale(2.5);
  margin-right: 1em;
}