この記事はこんな人におすすめ
- MUI における Radio button の基本の使い方を知りたい公式サイトの情報はコチラ。
環境
React: 17.0.2
MUI: 5.5.2
Radio の基本
Radio の基本書式は以下の通りで、チェック状態は checked 属性で設定をします。
<Radio checked={true or false} />
コード例を以下に示します。
import { Radio } from '@mui/material'; export default function RadioButtonSample1() { return ( <div> {/* RadioButton の基本使用方法 */} <Radio checked={true} />Female <Radio checked={true} />Male </div> ); }
この例を実行すると、数のように確かにラジオボタンとして使用可能なのですが、「Female」や「Male」といったテキスト部分をクリックしても、チェック状態は変わることがありません。また、グループ化されていないので、いずれか1つだけにチェックするということもできません。
グループ化とラベルの設定
先ほどの課題を解決するためには、グループ化とラベルの設定ができるようにします。
ラジオボタンは複数をまとめて1つのグループにすることができます。グループ化することで、その中の1つのラジオボタンにだけチェックを付けることができます。
グループ化するには、以下の書式のよう <RadioGroup> を使用します。
ここでは3つの属性をおぼてておく必要があります。
- <RadioGroup> の defaultValue 属性には、複数のラジオボタンにはチェック対象のラジオの値を指定します。
- <FormControlLabel> の value には、そのラジオにセットする値を設定します。
- <FormControlLabel> の label には、ラベルに表示する文字列を設定します。
<RadioGroup defaultValue="チェックを付ける値"> <FormControlLabel value="ラジオの値" control={<Radio />} label="ラジオに表示するラベル" /> : 必要な分だけ Radio を配置 </RadioGroup> }
以下に例を示します。
import Radio from '@mui/material/Radio'; import RadioGroup from '@mui/material/RadioGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; export default function RadioButtonSample2() { return ( <> <RadioGroup defaultValue="male"> <FormControlLabel value="female" control={<Radio />} label="Female" /> <FormControlLabel value="male" control={<Radio />} label="Male" /> <FormControlLabel value="other" control={<Radio />} label="Other" /> </RadioGroup> </> ); }
使用例を以下に示します。
ラジオボタンを横方向に配置する
先ほどの例では、複数のラジオボタンは縦方向に配置されました。
横方向に配置するには、以下書式のように <RadioGroup> に row 属性を付けます。
<RadioGroup defaultValue="チェックを付ける値" row> <FormControlLabel value="ラジオの値" control={<Radio />} label="ラジオに表示するラベル" /> <!-- 必要な分だけ Radio を配置 --> </RadioGroup>
以下に例を示します。
この例では、Female, Male, Other のラジオボタングループを横方向に配置します。
import Radio from '@mui/material/Radio'; import RadioGroup from '@mui/material/RadioGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; export default function RadioButtonSample3() { return ( <> {/* 横方向の配置 */} <RadioGroup defaultValue="male" row> <FormControlLabel value="female" control={<Radio />} label="Female" /> <FormControlLabel value="male" control={<Radio />} label="Male" /> <FormControlLabel value="other" control={<Radio />} label="Other" /> </RadioGroup> </> ); }
RadioGroup にラベルを付ける
ラジオグループにラベルを付けるには、<FormControl>, <FormLabel> を使用します。
<FormControl>
<FormLabel>ラジオグループに表示するラベル</FormLabel>
<!-- ここにラジオグループのコードを記述 -->
</FormControl>
以下に例を示します。この例を実行すると、ラベルの付いた縦並びのラジオグループと、ラベルの付いた横並びのラジオグループが表示されます。
import Radio from '@mui/material/Radio'; import RadioGroup from '@mui/material/RadioGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import { FormControl, FormLabel } from '@mui/material'; export default function RadioButtonSample4() { return ( <> {/* 横方向の配置 */} <FormControl> <FormLabel>性別</FormLabel> <RadioGroup defaultValue="male" row> <FormControlLabel value="female" control={<Radio />} label="Female" /> <FormControlLabel value="male" control={<Radio />} label="Male" /> <FormControlLabel value="other" control={<Radio />} label="Other" /> </RadioGroup> </FormControl> {/* 縦方向の配置 */} <FormControl> <FormLabel>性別</FormLabel> <RadioGroup defaultValue="male" > <FormControlLabel value="female" control={<Radio />} label="Female" /> <FormControlLabel value="male" control={<Radio />} label="Male" /> <FormControlLabel value="other" control={<Radio />} label="Other" /> </RadioGroup> </FormControl> </> ); }
MUI Tips 一覧
その他の MUI Tips 一覧はコチラを参照してください。
Please follow and like us:
コメント