[MUI Tips][Radio] ラベルの配置位置を変更する

MUI

MUI Tips

2022.05.28

この記事はこんな人におすすめ
環境
ラベルの配置位置を変更する
MUI Tips 一覧

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

MUI における Radio のラベルの配置位置を変更する方法を知りたい

公式サイトの情報はコチラ。

ラベル配置位置の変更例

環境

React: 17.0.2
MUI: 5.5.2

ラベルの配置位置を変更する

通常ラジオボタンのラベルの表示位置は、チェックの右隣です。これを変更するには、以下の書式の labelPlacement 属性を変更します。

<FormControlLabel 
    control={<Radio />} 
    label="ラベル" 
    labelPlacement='ラベルの位置'/>

値	説明
top	ラベルをチェックマークの上に表示します
start	ラベルをチェックマークの左に表示します
bottom	ラベルをチェックマークの下に表示します
end	ラベルをチェックマークの右に表示します

以下にラベルの表示位置を変更する例を示します。

import { MailOutlineRounded, MailRounded } from '@mui/icons-material';
import { FormGroup, FormControlLabel, Radio, } from '@mui/material';

export default function RadioButtonSample8() {
    return (
        <div>
            {/* Radio ラベルの表示位置を変更する例 */}
            <FormGroup row={true}>
                <FormControlLabel 
                    control={<Radio />} 
                    label="Top" 
                    labelPlacement='top'/>
                <FormControlLabel 
                    control={<Radio />} 
                    label="Start" 
                    labelPlacement='start'/>
                <FormControlLabel 
                    control={<Radio />} 
                    label="Bottom" 
                    labelPlacement='bottom'/>
                <FormControlLabel 
                    control={<Radio />} 
                    label="End" 
                    labelPlacement='end'/>
            </FormGroup>
        </div>
    );
}

ラベル配置位置の変更例