[MUI Tips][Select] 無効/エラー/必須/読み取り専用を設定する

MUI

MUI Tips

2022.06.02

この記事はこんな人におすすめ
環境
無効/エラー/必須を設定する
読み取り専用を設定する
MUI Tips 一覧

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

Select に無効/エラー/読み取り専用/必須を設定する方法を知りたい

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

無効、エラー、必須、読み取り専用の設定例

環境

React: 17.0.2
MUI: 5.5.2

無効/エラー/必須を設定する

Select で無効/エラー/必須を設定するには <FormControl> で属性を指定します。

以下に書式を示します。

無効は disabled、エラーは error、必須は required を指定します。

<!-- 無効 -->
<FormControl disabled>
  <Select>
  </Select>
</FormControl>
<!-- エラー -->
<FormControl error>
　　　　<Select> 
　　　　</Select> 
</FormControl>
<!-- 必須 -->
<FormControl required>
　　　　<Select> 
　　　　</Select> 
</FormControl>

読み取り専用を設定する

読み取り専用は <Select> に対し inputProps で readOnly 属性を与えます。

書式は以下の通りです。

<Select inputProps={{ readOnly: true }}>
<Select>

以下は、Select に無効/エラー/必須/読み取り専用を設定する例です。

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


// 無効、エラー、必須、読み取り専用
export default function SelectSample05() {
    return (
        <div>
            {/* 無効 */}
            <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }} disabled>
                <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="standard" sx={{ m: 1, minWidth: 120 }} error>
                <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="standard" sx={{ m: 1, minWidth: 120 }} required>
                <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="standard" sx={{ m: 1, minWidth: 120 }} >
                <InputLabel>曜日</InputLabel>
                <Select label="曜日"
                    inputProps={{ readOnly: true }}>
                    <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>
    );
}

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

無効、エラー、必須、読み取り専用の設定例