This seems like a basic question, but I was surprised to not be able to find the answer anywhere, so I'm providing one here.

The key in both cases is to capture the onkeydown event and run its method preventDefault().

Vanilla HTML and javascript

  <input type="number" min="0" max="100" step="2" value="10"

    onkeydown="preventKeyboardInput(event)" />



  <script>

    function preventKeyboardInput(event) {

      event.preventDefault();

    }

  </script>

React

  <input

    type="number"

    min={0}

    max={100}

    defaultValue={10}

    step={2}

    onKeyDown={(event) => {

      event.preventDefault();

    }}

  /> 

Material-UI

Material-UI's <TextField> is a wrapper around react's <input>, so all you need to do is pass onKeyDown down via inputProps, which you are already using to pass min, max, and defaultValue.

  const [value, setValue] = useState(10);



  return (

    <React.Fragment>

      <TextField

        name="name"

        type="number"

        label="label"

        inputProps={{

          min: 0,

          max: 100,

          step: 2,

          onKeyDown: (event) => {

             event.preventDefault();

          },

        }}

        defaultValue={value}

        onChange={(event) => {

          setValue(Number(event.target.value));

        }}

      />

    </React.Fragment>

  ); 

UPDATE: I've discovered roundabout that this breaks input boxes on touch devices, or at the very least iOS and iPadOS, neither of which display or allow input from spinners, which is probably why it was downvoted in the first place. Caveat emptor for anyone wanting to use this method.