[MUI Tips][Select] ラベルとヘルパーテキストを表示「する

[MUI Tips][Select] ラベルとヘルパーテキストを表示する

MUI

MUI Tips

2022.06.01

この記事はこんな人におすすめ
環境
ラベルとヘルパーテキストを表示する
MUI Tips 一覧

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

Select にラベルとヘルパーテキストを表示する方法を知りたい

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

ラベルとヘルパーテキストを表示する例

環境

React: 17.0.2
MUI: 5.5.2

ラベルとヘルパーテキストを表示する

Select にラベルを表示するには <InputLabel> と <Select label=”ラベル”>の両方にラベルを設定します。また、ヘルパーテキストを表示するには、<FormHelperText> を使用します。

以下に書式を示します。

<FormControl>
    <InputLabel>表示するラベル文字列</InputLabel>
    <Select label="表示するラベル文字列">
        <MenuItem value={値1}>表示テキスト1</MenuItem> 
        : 
        <MenuItem value={値n}>表示テキストn</MenuItem>
    </Select>
    <FormHelperText>ヘルパーテキスト</FormHelperText>
</FormControl>

以下は、ラベルに「曜日」、ヘルパーテキストに「ヘルパーテキスト」という文字列を表示する例です。

import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import { FormHelperText, Select } from '@mui/material';

// ラベルとヘルパーテキスト
export default function SelectSample03() {
    return (
        <div>
            <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
                <InputLabel>曜日</InputLabel>
                <Select label="曜日">
                    <MenuItem value={0}>Sun</MenuItem>
                    <MenuItem value={1}>Mon</MenuItem>
                    <MenuItem value={2}>Tue</MenuItem>
                    <MenuItem value={3}>Wed</MenuItem>
                    <MenuItem value={4}>Thu</MenuItem>
                    <MenuItem value={5}>Fri</MenuItem>
                    <MenuItem value={6}>Sat</MenuItem>
                </Select>
                <FormHelperText>ヘルパーテキスト</FormHelperText>
            </FormControl>

            <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
            <InputLabel>曜日</InputLabel>
                <Select label="曜日">
                    <MenuItem value={0}>Sun</MenuItem>
                    <MenuItem value={1}>Mon</MenuItem>
                    <MenuItem value={2}>Tue</MenuItem>
                    <MenuItem value={3}>Wed</MenuItem>
                    <MenuItem value={4}>Thu</MenuItem>
                    <MenuItem value={5}>Fri</MenuItem>
                    <MenuItem value={6}>Sat</MenuItem>
                </Select>
                <FormHelperText>ヘルパーテキスト</FormHelperText>
            </FormControl>

            <FormControl variant="outlined" sx={{ m: 1, minWidth: 120 }}>
            <InputLabel>曜日</InputLabel>
                <Select label="曜日">
                    <MenuItem value={0}>Sun</MenuItem>
                    <MenuItem value={1}>Mon</MenuItem>
                    <MenuItem value={2}>Tue</MenuItem>
                    <MenuItem value={3}>Wed</MenuItem>
                    <MenuItem value={4}>Thu</MenuItem>
                    <MenuItem value={5}>Fri</MenuItem>
                    <MenuItem value={6}>Sat</MenuItem>
                </Select>
                <FormHelperText>ヘルパーテキスト</FormHelperText>
            </FormControl>
        </div>
    );
}

実行例は以下の通りです。

ラベルとヘルパーテキストを表示する例