MUIのテキストフィールドで数字キーボードの出し方や数字（小数点の有無）の入力制限方法。

MUIのテキストフィールドにおいて、スマホのキーボードを数字キーボードにする方法や
その数字キーボードに小数点を表示させるかどうかを設定する方法を記します。

はじめに

MUIの入力欄にはいくつか種類がありますが、TextFieldは、Input、FilledInput、OutlinedInputのラッパーとして動作します。例えば、 variant=”outlined|filled|standard”です。
TextFieldでは、FilledInputやOutlinedInputを指定できますが、

It’s important to understand that the text field is a simple abstraction on top of the following components:

TextField API - Material UI

API reference docs for the React TextField component. Learn about the props, CSS, and other APIs of this exported module...

mui.com

にもある通り、高度な設定をするにはそれぞれ、具体的なコンポーネントを直接指定してあげる必要があります。

TextFieldで数字キーボードの出し方や数字（小数点の有無）を出そうとするならば、
inputModeやtypeをnumber、TELに指定してあげるなど方法はあるにせよ若干不自然です。

以下のように指定してあげることで簡単に数字キーボードを出せます。

数字キーボードの出し方や数字（小数点の有無）の入力制限方法

OutlinedInputを使用した場合、inputModeをnumericと指定することで数字のキーボードが表示されるようになります。数字のみを許可したいのでpatternを使用して0~9を入力できるようにしています。

<OutlinedInput
value={''}
slotProps={{ input: {
   inputMode: 'numeric',
   pattern: '[0-9]*',
 }
}}
/>

小数点を含める場合は、以下のように指定しましょう。
inputModeをdecimalにすることで、数字キーボードの左下に小数点が配置されます。
入力できるpatternを0~9と小数点(.)を指定しましょう。

また、typeは明示しない場合、標準でtextになりますが
小数点は、typeをnumberにしないと入力できないので注意が必要です。

<OutlinedInput
type='number'
value={''}
slotProps={{ input: {
   inputMode: 'decimal',
   pattern: '[0-9.]*',
 }
}}
/>