Components ∋ Radio
まずは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 で囲むとキーボードの←
↓
↑
→
キーでチェックしたい項目を切り替えることができます。