How to remove up and down arrow in MUI number field?

user_11386799 0
Viewed 1500

I want to remove the up and down arrow when using the MUI number field. I'm using version 5.3.0. Is it possible in sx prop?

enter image description here

The sx prop

<TextField
  sx={{...}}
  id="outlined-number"
  label="Number"
  type="number"     
/>
material-ui css
1 Answers

From the docs, the type prop accepts valid HTML input types. I believe the reason the up and down arrows are present is because you specified number as the type.

Try type="tel" instead, as it seems to be the standard input type for phone numbers.

Here is a reference to the tel type and why it's a good idea to use it. Note that if the current browser doesn't support it, it will fall back to being a regular text field

I found this answer here: How to remove the up and down arrow from a mui number field?

user_175731400
Related