ふかしぎのReactさんぷるず

TextFieldの解説 Componet API - MUI v5 API - Reactさんぷるず

最終更新 2022/05/31
MUI v5のTextFieldの説明です。
対象のMUIのバージョンは v5.6.1 です。
ここでは初心者向けの基本的な説明をしています。

使用するための下準備

お約束です。取り込まないと使えません。
インポートならば
import { TextField } from '@mui/material';
CDNで使いたいのなら<script>でMUIを読み込んだ後に
const TextField = MaterialUI.TextField;
で使用できるようになります。
CDNでの詳しいやり方はこちらに移動してください。

TextFieldの各プロパティの解説

MUIでのテキスト欄の扱い方の説明です。
HTMLのINPUTの代わりにTextFieldを使用して入力欄を作成します。
味気のないHTMLのINPUTと違い、なにも設定しなくても枠線やフォーカスしたときの色変更などちょっといい感じになります。
const TextField = MaterialUI.TextField;
ReactDOM.render(
<TextField />
, document.getElementById('sample')
);

autoComplete

TextFieldのautoCompleteの使い方の説明です。
省略
内部で生成される<input type="text">のautoCompleteを設定できます。

autoFocus

TextFieldのautoFocusの使い方の説明です。
ページが最初に表示されたときにフォーカスをあてるときに使用します。
このページを表示した時に最初にここの入力欄にフォーカスが当たっています。
ブール値を設定します。trueにするとフォーカスが当たります。
※注意してください。ブール値を渡さなければいけないためautoFocus="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。autoFocusと書くだけでautoFocus={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const TextField = MaterialUI.TextField;
ReactDOM.render(
<TextField autoFocus={true} defaultValue="autoFocusです" />
, document.getElementById('sample')
);

classes

TextFieldのclassesの使い方の説明です。
CSSの設定を上書きします。

color

TextFieldのcolorの使い方の説明です。
色の設定はcolorで行います。
使えるのはprimary、secondary、success、error、info、warning、それと自分で作った色です。
自分で色を作る場合は変数で定義しThemeProviderで適用します。
未設定のデフォルトはprimaryになります。
各入力欄にフォーカスを当てると枠線の色が変わっていることが分かります。
const TextField = MaterialUI.TextField;
const ThemeProvider = MaterialUI.ThemeProvider;
const createTheme   = MaterialUI.createTheme;
const tukuttaTheme = createTheme({
  palette: {
    tukuttaIro: {
      main: '#ff00ff',
    },
  },
});
ReactDOM.render(
<ThemeProvider theme={tukuttaTheme}>
<TextField color="primarydefaultValue="primary色" />
<TextField color="secondarydefaultValue="secondary色" />
<TextField color="successdefaultValue="success色" />
<TextField color="errordefaultValue="error色" />
<TextField color="infodefaultValue="info色" />
<TextField color="warningdefaultValue="warning色" />
<TextField color="tukuttaIro" defaultValue="自分で作った色" />
</ThemeProvider>
, document.getElementById('sample')
);

defaultValue

TextFieldのdefaultValueの使い方の説明です。
Reactが管理していない値を表示する場合に使います。
Reactが管理していないので表示されている値をユーザー側で変更できます。
Reactで管理されている値はvalueを使って表示します。
サンプルの左はデフォルトバリューです。中の文字を変えることができます。
右側はバリューです。中の文字を変えようとしてもできません。
valueは表示されている値をユーザーが変更しようと思っても出来ません。変更する場合はReact側で行います。
const TextField = MaterialUI.TextField;
ReactDOM.render(
<div>
  <TextField defaultValue="defaultValueです" />
  <TextField value="valueです" />
</div>
, document.getElementById('sample')
);

disabled

TextFieldのdisabledの使い方の説明です。
入力欄を不使用にする場合に使います。
全体が薄い灰色になり入力不可になります。
ブール値を設定します。trueにすると不使用になります。
※注意してください。ブール値を渡さなければいけないためdisabled="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disabledと書くだけでdisabled={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const TextField = MaterialUI.TextField;
ReactDOM.render(
<div>
<TextField disabled={true} defaultValue="disabledです" />
<TextField disabled defaultValue="disabledです(省略形)" />
</div>
, document.getElementById('sample')
);

error

TextFieldのerrorの使い方の説明です。
error状態にしたいときに設定します。
フォーカスが当たっていないときにerrorの色になります。
この色はthemeで設定した色です。
ブール値を設定します。trueにするとerrorの色になります。
※注意してください。ブール値を渡さなければいけないためerror="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。errorと書くだけでerror={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const TextField = MaterialUI.TextField;
ReactDOM.render(
<div>
  <TextField error={true} defaultValue="errorです" />
  <TextField error defaultValue="errorです(省略系)" />
</div>
, document.getElementById('sample')
);

FormHelperTextProps

TextFieldのFormHelperTextPropsの使い方の説明です。
helperTextでまとめて説明しています。

fullWidth

TextFieldのfullWidthの使い方の説明です。
入力欄を横幅一杯に表示します。
ブール値を設定します。trueにすると横幅一杯になります。
※注意してください。ブール値を渡さなければいけないためfullWidth="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。fullWidthと書くだけでfullWidth={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const TextField = MaterialUI.TextField;
ReactDOM.render(
<div>
  <TextField fullWidth={true} defaultValue="fullWidthです" />
  <TextField fullWidth defaultValue="fullWidthです(省略形)" />
</div>
, document.getElementById('sample')
);

helperText、FormHelperTextProps

TextFieldのhelperTextとFormHelperTextPropsの使い方の説明です。
入力欄に注意書きを付け加えたいときに使います。
入力欄の下に表示されます。
ノードを指定できるので文字列でなくても構いません。
ちなみにhelperTextは自動的にP要素で囲まれるためDIVでノードを作ると怒られます。開発版React(react.development.jsの場合)
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
P要素の中にDIV要素は入れられません。
TextFieldのhelperTextはP要素が自動生成さます
上記は生成されたサンプルのHTMLです。P要素で囲まれているのが分かります。
const TextField = MaterialUI.TextField;
const TukuttaSpan = <span style={{color: 'red'}}>helperTextをnodeを使用し赤い文字で表示する</span>;
ReactDOM.render(
<div>
  <TextField helperText="ここにhelperTextが表示される" />
  <TextField helperText={TukuttaSpan} />
</div>
, document.getElementById('sample')
);
helperTextにプロパティを渡すことができます。FormHelperTextPropsを使用します。
サンプルではCSSのクラス名を指定し背景を赤色に、sxを使用し文字色を白に変えています。
const TextField = MaterialUI.TextField;
const FormHelperTextProps = MaterialUI.FormHelperTextProps;
ReactDOM.render(
<TextField helperText="FormHelperTextPropsでhelperTextの表示を変更する"
 FormHelperTextProps={{
  className:"bgRed",
  sx:{color:"#ffffff"}
 }}
/>
, document.getElementById('sample')
);
<style>.bgRed {background-color: red;}</style>

id

TextFieldのidの使い方の説明です。
内部で生成されるINPUT要素のid属性を設定できます。
生成されたHTMLを見るとid="idです"があるのがわかります。
TextFieldのidがinput要素に設定されます
const TextField = MaterialUI.TextField;
ReactDOM.render(
  <TextField id="idです" />
, document.getElementById('sample')
);

InputLabelProps

TextFieldのInputLabelPropsの使い方の説明です。
labelでまとめて説明しています。

inputProps

TextFieldのinputPropsの使い方の説明です。
先頭文字が小文字のinputPropsと先頭文字が大文字のInputPropsがあります。注意してください。
inputPropsは最終的に生成されるHTMLのINPUT要素の属性を設定できます。
生成されたHTMLを見るとdata-test="inputPropsで設定した属性です"があるのがわかります。
TextFieldのinputPropsでinput要素の属性を設定できます
const TextField = MaterialUI.TextField;
ReactDOM.render(
  <TextField inputProps={{"data-test":"inputPropsで設定した属性です"}} />
, document.getElementById('sample')
);

InputProps

TextFieldのInputPropsの使い方の説明です。
先頭文字が小文字のinputPropsと先頭文字が大文字のInputPropsがあります。注意してください。
TextFieldのvariantは実際には当てはまるコンポーネントに値を渡すかたちになります。
filledはFilledInputに
outlinedはOutlinedInputに
standardはInputに
そのため例えばTextFiledでvariant="filled"ではなく、FilledInputを直接呼び出しても同じになります。
InputPropsはそのTextFieldが呼び出したFilledInput、OutlinedInput、Inputに渡すプロパティを設定できます。
サンプルの3段目はvariantでFilledInputコンポーネントを指定しそのプロパティdisableUnderlineをtrueにしたのでフォーカスを当ててもアンダーラインが表示されなくなっています。
const TextField = MaterialUI.TextField;
const FilledInput = MaterialUI.FilledInput;
const OutlinedInput = MaterialUI.OutlinedInput;
const Input = MaterialUI.Input;
ReactDOM.render(
<div>
  <div>直接設定</div>
  <div style={{marginBottom:"10px"}}>
    <FilledInput defaultValue="FilledInputです" />
    <OutlinedInput defaultValue="OutlinedInputです" />
    <Input defaultValue="Inputです" />
  </div>
  <div>TextFieldのvariantで設定</div>
  <div>
    <TextField variant="filleddefaultValue="filledです" />
    <TextField variant="outlineddefaultValue="outlinedです" />
    <TextField variant="standarddefaultValue="standardです" />
  </div>
  <div>TextFieldのvariantで設定したFilledInputのdisableUnderlineを設定</div>
  <div>
    <TextField variant="filledInputProps={{"disableUnderline":true}} defaultValue="filledです" />
  </div>
</div>
, document.getElementById('sample')
);

inputRef

TextFieldのinputRefの使い方の説明です。
inputRefは最終的に生成されるHTMLのINPUT要素のrefを設定できます。
サンプルでは入力欄をクリックするとコンソールにrefの内容を表示します。
TextFieldのinputRefでinput要素のref属性を設定できます
const TextField = MaterialUI.TextField;
const Main = () => {
  const tukuttaRef = React.useRef(null);
  return (
    <TextField inputRef={tukuttaRef} onClick={()=>{console.log(tukuttaRef.current);}} />
  );
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

label、InputLabelProps

TextFieldのlabelとInputLabelPropsの使い方の説明です。
labelは入力欄が空欄の場合は入力欄に、フォーカスがあたると左上に小さく表示される文字列です。
アニメーションで左上に移動するのでちょっとかっこいいです。
ノードを指定できるので文字列でなくても構いません。
requiredが設定されている場合はラベルの末尾に必須の意味として*(アスタリスク)が付け加えられます。
サンプルの1つ目は文字列のlabelですを設定しています。
2つ目はノードで設定し赤色で表示しています。
const TextField = MaterialUI.TextField;
const TukutaSpan = <span style={{color: 'red'}}>labelをnodeで赤字表示</span>;
ReactDOM.render(
<div>
  <TextField label="labelです" />
  <TextField label={TukutaSpan} />
</div>
, document.getElementById('sample')
);
labelにプロパティを渡すことができます。InputLabelPropsを使用します。
サンプルではCSSのclass名を指定し背景を灰色に、sxを使用し文字を斜体に変えています。
const TextField = MaterialUI.TextField;
const InputLabelProps = MaterialUI.InputLabelProps;
ReactDOM.render(
<TextField label="InputLabelPropsでlabelの表示変更"
 InputLabelProps={{
  className:"bgLightGray",
  sx:{fontStyle:"italic"}
 }}
/>
, document.getElementById('sample')
);
<style>.bgLightGray {background-color: #dddddd;}</style>

margin

TextFieldのmarginの使い方の説明です。
marginで上下の幅を設定します。
normal、dense、noneの3種類があります。
normalが通常になります。
dense(密集)は通常よりも細目。
noneは上下幅無し。
未設定のデフォルトはnoneになります。
const TextField = MaterialUI.TextField;
ReactDOM.render(
<div>
  <div style={{border:"1px solid #000",marginBottom:"10px"}}>
    <TextField margin= "normaldefaultValue="normal" />
  </div>
  <div style={{border:"1px solid #000",marginBottom:"10px"}}>
    <TextField margin= "densedefaultValue="dense" />
  </div>
  <div style={{border:"1px solid #000"}}>
    <TextField margin= "nonedefaultValue="none" />
  </div>
</div>
, document.getElementById('sample')
);

maxRows

TextFieldのmaxRowsの使い方の説明です。
multilineでまとめて説明しています。

minRows

TextFieldのminRowsの使い方の説明です。
multilineでまとめて説明しています。

multiline、minRows、maxRows、rows

TextFieldのmultilineの使い方の説明です。
入力欄を複数行にするにはmultilineを設定します。
ブール値を設定します。trueにすると複数行入力欄が有効になります。
※注意してください。ブール値を渡さなければいけないためmultiline="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。multilineと書くだけでmultiline={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
minRowsを指定すると最低表示行数を設定でき表示されるときに最低でもこの行数分表示されます。
maxRowsを指定すると最大表示行数を設定でき入力値がこれを上回る行数の場合はスクロールバーが表示されます。
rowsはminRowsとmaxRowsを同じ値で指定するのと同じになります。
rows=10はminRows=10、maxRows=10と同じ意味になります。
rowsと、minRowsやmaxRowsは同時に使用できません。
サンプルの1つ目はminRowsが3なので最初から3行分高さが確保されていますmaxRowsが4なので4行を超えた5行目からスクロールバーが表示されます。
サンプルの2つ目はminRowsが4なので最初から4行分高さが確保されていますmaxRowsが5なので5行を超えた6行目からスクロールバーが表示されます。
サンプルの3つ目はminRowsが5なので最初から5行分高さが確保されていますmaxRowsが5なので5行を超えた6行目からスクロールバーが表示されます。
サンプルの4つ目はrowsが5なのでminRows5、maxRows5と同じ意味、つまりサンプルの3つ目と同じになります。最初から5行分高さが確保されていますmaxRowsが5なので5行を超えた6行目からスクロールバーが表示されます。
const TextField = MaterialUI.TextField;
ReactDOM.render(
<div>
  <TextField multiline={true} minRows="3" maxRows="4" defaultValue="1.複数行、minRows3行、maxRows4行"/>
  <TextField multiline={true} minRows="4" maxRows="5" defaultValue="2.複数行、minRows4行、maxRows5行"/>
  <TextField multiline={true} minRows="5" maxRows="5" defaultValue="3.複数行、minRows5行、maxRows5行"/>
  <TextField multiline={true} rows="5" defaultValue="4.複数行、rows5行"/>
</div>
, document.getElementById('sample')
);

name

TextFieldのnameの使い方の説明です。
INPUT要素のnameと同じです。
内部で生成されるINPUT要素のname属性を設定できます。
生成されたHTMLを見るとname="nameです"があるのがわかります。
TextFieldのidがinput要素に設定されます
const TextField = MaterialUI.TextField;
ReactDOM.render(
  <TextField name="nameです" />
, document.getElementById('sample')
);

onChange

TextFieldのonChangeの使い方の説明です。
onChangeイベントです。
変更を検知してなにか処理したいときに使います。
サンプルでは一文字でも入力されたら内容を「変更された」に変えます。
const TextField = MaterialUI.TextField;
ReactDOM.render(
  <TextField defaultValue="入力してください" onChange={(event)=>event.target.value='変更された'} />
, document.getElementById('sample')
);

placeholder

TextFieldのplaceholderの使い方の説明です。
INPUT要素のplaceholderと同じです。
labelが設定されているとフォーカスが当たっていないときはlabelが優先的に表示されます。
labelが設定されている場合はフォーカスが当たってなおかつ空欄の場合にplaceholderが表示されます。
const TextField = MaterialUI.TextField;
ReactDOM.render(
<div>
  <TextField placeholder="placeholder1です" />
  <TextField placeholder="placeholder2です" label="labelが優先" />
</div>
, document.getElementById('sample')
);

required

TextFieldのrequiredの使い方の説明です。
INPUT要素のrequiredと同じです。
labelがある場合は必須だよの意味の*(アスタリスク)がラベルの末尾に追加されます。
※注意してください。ブール値を渡さなければいけないためrequired="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。requiredと書くだけでrequired={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const TextField = MaterialUI.TextField;
ReactDOM.render(
  <TextField required={true} label="labelです" />
, document.getElementById('sample')
);

rows

TextFieldのrowsの使い方の説明です。
multilineでまとめて説明しています。

select、SelectProps

TextFieldのselectの使い方の説明です。
入力欄をセレクトボックスに置き換えます。
ブール値を設定します。trueにするとセレクトボックスになります。
※注意してください。ブール値を渡さなければいけないためselect="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。selectと書くだけでselect={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
selectの選択肢を子要素に設定する必要があります。
そしてvaluedefaultValueで初期値を設定しておかないと怒られます。
You have provided an out-of-range value `undefined` for the select component.
Consider providing a value that matches one of the available options or ''.
と未定義だからどの値を最初に表示すればいいかわからないぞと言われてしまいます。
const TextField = MaterialUI.TextField;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<TextField select={true} defaultValue="2">
  <MenuItem value="1">1</MenuItem>
  <MenuItem value="2">2</MenuItem>
</TextField>
, document.getElementById('sample')
);
selectにプロパティを渡すことができます。SelectPropsを使用します。
サンプルではCSSのクラス名を指定し背景を灰色に、sxを使用し文字を斜体に変えています。
const TextField = MaterialUI.TextField;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<TextField select={true} defaultValue="2"
  SelectProps={{
  className:"bgLightGray",
  sx:{fontStyle:"italic"}
 }}
>
  <MenuItem value="1">1</MenuItem>
  <MenuItem value="2">2</MenuItem>
</TextField>
, document.getElementById('sample')
);
<style>.bgLightGray {background-color: #dddddd;}</style>

SelectProps

TextFieldのSelectPropsの使い方の説明です。
selectでまとめて説明しています。

size

TextFieldのsizeの使い方の説明です。
sizeは大きさを設定します。
medium、small、自分で決めたサイズの3種類があります。
const TextField = MaterialUI.TextField;
ReactDOM.render(
<div>
  <TextField size="mediumdefaultValue="mediumです" />
  <TextField size="smalldefaultValue="smallです" />
</div>
, document.getElementById('sample')
);

sx

TextFieldのsxの使い方の説明です。
他のコンポーネントと共通のプロパティのため別ページにまとめました。
sxの解説に移動してください。

type

TextFieldのtypeの使い方の説明です。
HTMLのINPUT要素のtypeと同一です。
<INPUT type="text">や<INPUT type="number">のtypeをそのまま記述します。
サンプルの1つ目はtypeをtextにしています。デフォルトでtextが適用されるのでこれはわざわざ書かなくても構いません。
2つ目はtypeをnumberにしています。数値しか入力できないINPUT要素が作られます。
const TextField = MaterialUI.TextField;
ReactDOM.render(
<div>
  <TextField type="textvariant="outlineddefaultValue="text" />
  <TextField type="number" variant="outlineddefaultValue="0" />
</div>
, document.getElementById('sample')
);

value

TextFieldのvalueの使い方の説明です。
Reactで管理されている値はvalueを使って表示します。
valueは表示されている値をユーザーが変更しようと思っても出来ません。変更する場合はReact側で行います。
const TextField = MaterialUI.TextField;
ReactDOM.render(
<TextField value="valueです" />
, document.getElementById('sample')
);

variant

TextFieldのvariantの使い方の説明です。
TextFieldの形はvariantで設定します。
filled、outlined、standardの3種類です。
filledは背景を色付きで表示します。
outlinedは枠線だけで表示します。
standardは下線のみで表示します。
未設定のデフォルトはoutlinedになります。
const TextField = MaterialUI.TextField;
ReactDOM.render(
<div>
  <TextField variant="filleddefaultValue="filledです" />
  <TextField variant="outlineddefaultValue="outlinedです" />
  <TextField variant="standarddefaultValue="standardです" />
  <TextField defaultValue="未設定はoutlinedになる" />
</div>
, document.getElementById('sample')
);
menu

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次