[MUI Tips][Radio] ラジオボタン の基本使用方法

MUI Tips MUI
MUI Tips
スポンサーリンク

この記事はこんな人におすすめ

  • 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つだけにチェックするということもできません。

Radio の使用例

Radio の使用例

グループ化とラベルの設定

先ほどの課題を解決するためには、グループ化とラベルの設定ができるようにします。

ラジオボタンは複数をまとめて1つのグループにすることができます。グループ化することで、その中の1つのラジオボタンにだけチェックを付けることができます。

グループ化するには、以下の書式のよう <RadioGroup> を使用します。

ここでは3つの属性をおぼてておく必要があります。

  1. <RadioGroup> の defaultValue 属性には、複数のラジオボタンにはチェック対象のラジオの値を指定します。
  2. <FormControlLabel> の value には、そのラジオにセットする値を設定します。
  3. <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:

コメント

タイトルとURLをコピーしました