まずはRadioコンポーネントを使う準備をします。

import Radio from "@material-ui/core/Radio";

もし TypeScript 上でならRadioProps型も取り込むと便利かもしれません。

import Radio, {RadioProps} from "@material-ui/core/Radio";

まずは使ってみる

単に<Radio />と置くだけでも以下の画像のように動きます。（分かりやすいようにチェックを入れたものを横に置いてます。）

カスタマイズ

いくつか設定可能なプロパティがあります。

checked

上記画像のようなチェック状態にしたい場合はchecked(boolean)を設定することで上記画像の右側のような状態にできます。

onChange

状態が変わった時に呼び出されるハンドラーです。これには、

(event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;

というような型の関数を渡します。

<Radio
  onChange={(changeEvent, checked) => {
    console.log(changeEvent, checked /* === true */);
  }}
/>;

value

<input>要素のvalueとなる値を渡します。これを設定することでchangeEventからvalueを取得することができます。

<Radio
  onChange={changeEvent => {
    console.log(changeEvent.target.value /* === 'foo' */);
  }}
  value="foo"
/>;

name

<input>要素のnameとなる値を渡します。主にグループを形成する為に使います。

<Radio name="foo" />;

inputProps

「RadioPropsで用意されていないけど<input>要素に渡したい」属性はここに渡します。

<Radio
  inputProps={{
    "aria-label": "foo"
  }}
/>;

data-fooのような属性も問題なく渡せますが、TypeScript の場合型エラーになります。

型 '{ "data-foo": string; }' を型 'InputHTMLAttributes\<HTMLInputElement>' に割り当てることはできません。

classes

makeStyles → useStylesにより生成されたclassesオブジェクトを渡します。

size

Radio ボタンの大きさをsmall | mediumの中から指定できます。デフォルトはmediumです。

color

Radio ボタンの色を'primary' | 'secondary' | 'default'の中から指定できます。デフォルトは'secondary'です。
'primary'はチェック時に青色、'default'は灰色で塗りつぶされます。

icon

デフォルトでは Radio ボタンのビジュアルは<svg>要素なのでCSSで弄る事が難しいです。このプロパティにReact.ReactNodeを渡すことで<svg>要素が置かれている箇所を好きな要素に置き換えることができます。

checkedIcon

iconと同じく<svg>要素を置き換えることが目的ですが、こちらはチェック済みの状態のReact.ReactNodeを渡します。

これは以下のようなマークアップで、

<>
  <Radio
    icon={
      <div
        style={{
          background: "gray",
          width: 15,
          height: 15,
          borderRadius: "50%"
        }}
      />
    }
  />
  <Radio
    checked
    checkedIcon={
      <div
        style={{
          background: "orange",
          width: 15,
          height: 15,
          borderRadius: "50%"
        }}
      />
    }
  />
</>;

以下の画像のように表示されます。

RadioGroup

以下でインポートして使います。

import RadioGroup from '@material-ui/core/RadioGroup';

この要素で囲む理由の1つはチェックされる要素を1つにする為です。RadioGroup はプロパティにvalueを設定でき、この値と等しいvalueを持つ子 Radio をチェック済みにすることができます。

さらにもう1つの理由はキーボード操作をし易くする為です。RadioGroup で囲むとキーボードの← ↓ ↑ →キーでチェックしたい項目を切り替えることができます。