How to Show Numeric Keyboards and Restrict Number (with or without Decimal) Input in MUI TextFields

This document explains how to display a numeric keyboard on smartphones when using MUI TextField,
and how to control whether or not to allow decimal input.

Introduction

MUI’s TextField wraps the following three components:

• Input
• FilledInput
• OutlinedInput

You can specify which one to use via variant="outlined|filled|standard".

Reference:
https://mui.com/material-ui/api/text-field/

For advanced input control (numbers, decimals, etc.),
it’s more flexible to use components like OutlinedInput directly.

---

How to Display a Numeric Keyboard on Smartphones

Integer Only

To display a numeric keyboard, use inputMode="numeric" and pattern="[0-9]*":

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

📱 This setting displays a number-only keyboard without a decimal point on smartphones.

---

Including Decimal Input

• Use inputMode="decimal" to allow decimal input.
• Be sure to specify type="number", or decimal input may be blocked.

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

📱 This shows a keyboard with a decimal point on smartphones.

---

Notes

• Using type="number" may allow characters like e and + in some browsers.
  Use additional validation if strict control is needed.
• The pattern attribute acts as a hint for mobile keyboards, but does not enforce strict validation.
  Always validate input on the JavaScript side as well.

---

Conclusion

While TextField has limited fine-tuned control,
you can improve the mobile UX significantly by using base components like OutlinedInput.
This is especially important when optimizing form input on mobile devices.