How do I get my React TextField to open the number pad when inputting on a mobile device?

Question

I have a React TextField that is taking user input and it is representing a date. When the user clicks on the field I want the number keyboard to open instead of the full alphabet. I was looking at the React docs here and trying to mimic their example.

My TextField looks like the following:

  <TextField
    { ...materialConfiguration }
    floatingLabelFixed={value.length > 0}
    floatingLabelText={label}
    errorText={errorText}
    onChange={this.onChange}
    onKeyUp={this.debouncedOnKeyUp}
    onBlur={this.onBlur}
    type="number"
    label="Number"
    id="standard-number"
    >
    <Cleave value={value} options={{date: true, datePattern: ['m', 'd', 'Y']}} />
  </TextField>

I added the type label and id fields from the React example thinking that was what made the keyboard change but it does not work. How can I get this input to open the number pad?

The React example is this:

<TextField
  id="standard-number"
  label="Number"
  value={this.state.age}
  onChange={this.handleChange('age')}
  type="number"
  className={classes.textField}
  InputLabelProps={{
    shrink: true,
  }}
  margin="normal"
/>

Thanks

Answer 1

UPDATED in 2021

  <TextField id="quantity" label="Quantity" inputProps={{ inputMode: 'numeric' }}/>

using inputProps does solve the issue. inputProps object is attributes applied to the input element.

https://material-ui.com/api/text-field/#textfield-api

Answer 2

Yo have to add this attributes to your input tag:

<input type='number' inputMode='numeric' pattern="[0-9]*" />

Answer 3

Real world example - noting that inputProps and InputProps are not the same somehow.

<TextField
    inputProps={{
        inputMode: 'decimal',
    }}
    InputProps={{
        startAdornment: (
            <InputAdornment position="start">
                <Icon />
            </InputAdornment>
        ),
        endAdornment: (
            <InputAdornment position="end">
                <IconButton
                    disabled={disabled}
                    onClick={() => {
                        swapCurrencies()
                    }}
                >
                    <SwapVertIcon />
                </IconButton>
            </InputAdornment>
        ),
    }}
    name={'amount'}
    className={classes.root}
    fullWidth
    disabled={disabled}
    onChange={e => {
        doStuff()
    }} />

Answer 4

Useful to know as well, if you want a decimal point to appear. You will need to add the following to you input tag...

inputMode='decimal'

Example below

<input 
   type='number' 
   step='any' 
   inputMode='decimal' 
   pattern='\d*'
/>

Answer 5

import React, { Component } from 'react';
import { TextField } from '@mui/material';
     
 export default function NumericField(props) { 
    const [state,setState] = React.useState(""); 
    const handleChange=(event)=> {
    const regx = /^[0-9\b]+$/;
      if (event.target.value === '' || regx.test(event.target.value)) {
         setState( event.target.value);
  }

}
 return (
        <TextField 
            type="text"
            value={state}
            label={props.label} 
            fullWidth={props.fullWidth}
            onChange={handleChange} 
            id={props.id}
            required={props.required}
            disabled={props.disabled}
            error={props.error}
            helperText={props.helperText}
            name={props.name}/>
      
        );
    }