[MUI Tips][TextField] TextField の基本使用方法

MUI

MUI Tips

2022.05.152022.05.25

この記事はこんな人におすすめ
環境
TextFieldの基本
MUI Tips 一覧

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

MUI における TextField の基本の使い方を知りたい

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

TextField の基本使用例

環境

React: 17.0.2
MUI: 5.5.2

TextFieldの基本

TextField は文字通りテキストを入力するためのインターフェースです。HTMLでは <input type=”text /> で表されるものです。

TextField の基本書式は以下の通りで、label には TextField に表示するラベルを、variant にはスタイルを表す文字列を指定します。

<TextField label="ラベルに表示する文字列" variant="スタイルを表す文字列" />

variant 属性に指定できる値を以下に示します。

値	説明	外観
outlined	白抜きのテキスト入力欄を表示します
filled	グレーのテキスト入力欄を表示します
disabled	下線のあるテキスト入力欄を表示します

コード例を以下に示します。

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

export default function TextFieldSample1() {
    return (
        <Stack spacing={2} direction="row">
            {/* TextField の基本使用方法 */}
            <TextField label="Outlined" variant="outlined" />
            <TextField label="Filled" variant="filled" />
            <TextField label="Standard" variant="standard" />
        </Stack>
    );
}

以下に実行例を示します。

上段はテキストが未入力の状態、下段はテキストを入力した時の外観を表しています。