[MUI Tips][TextField] エラーを表示する

MUI

MUI Tips

2022.05.232022.05.25

この記事はこんな人におすすめ
環境
TextField でエラーを表示する
MUI Tips 一覧

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

MUI における TextField でエラー表示する方法を知りたい

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

エラーを表示する例

環境

React: 17.0.2
MUI: 5.5.2

TextField でエラーを表示する

TextField に入力された値に誤りがあった場合、error 属性を付与すると、赤枠になりエラーになっていることがわかるようになります。また helperText 属性で指定したメッセージも赤文字になります。

<TextField error helperTexrt="メッセージ" />

以下は、上記の書式を使用して、TextField でエラー表示する例です。

１行目（1つ目の <Stack> 内）は、赤枠でエラーを表現しています。

２行目（2つ目の <Stack> 内）は、赤枠でエラーを表現するとともに、ヘルパーテキストも赤文字にしてエラーを表現しています。

import TextField from '@mui/material/TextField';
import { Stack } from '@mui/material';

export default function TextFieldSample9() {
    return (
        <>
        <Stack spacing={2} direction="row">
            {/* TextField でエラー表示する例 */}
              
            <TextField id="outlined-basic" label="Outlined" variant="outlined" 
                       error />
            <TextField id="filled-basic" label="Filled" variant="filled"
                       error />
            <TextField id="standard-basic" label="Standard" variant="standard" 
                       error />
        </Stack>
        <br />
        <Stack spacing={2} direction="row">
            {/* TextField でエラー表示する例（ヘルパーテキスト付き） */}
              
            <TextField id="outlined-basic" label="Outlined" variant="outlined" 
                       error helperText="入力値に誤りがあります"/>
            <TextField id="filled-basic" label="Filled" variant="filled"
                       error helperText="入力値に誤りがあります"/>
            <TextField id="standard-basic" label="Standard" variant="standard" 
                       error  helperText="入力値に誤りがあります"/>
        </Stack>
        </>
    );
}

エラーを表示する例