2

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"     
/>
avishka
  • 171
  • 1
  • 5
  • 19
  • 1
    It's possible, although not through the `sx` prop, as you need to style _pseudo-elements_ representing the buttons. And it's a [hack](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button). You can check this [stackoverflow thread](https://stackoverflow.com/questions/45396280/customizing-increment-arrows-on-input-of-type-number-using-css) for details. A simple working example can be found in this [sandbox](https://codesandbox.io/s/input-number-no-spinners-k33me) – tromgy Jan 22 '22 at 13:43
  • thanks, @tromgy sandbox code is working. – avishka Jan 24 '22 at 06:36

4 Answers4

0

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?

Emiel Van de Veire
  • 117
  • 1
  • 1
  • 8
0

First add className to NumberField component

   <NumberField className="no-spinners" />

This works for me. (The CSS Approach)

   .no-spinners input[type="number"]::-webkit-inner-spin-button,
   .no-spinners input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        -moz-appearance: textfield;
        margin: 0;
}
Manas RA
  • 3
  • 3
0

You can create your custom styling:

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  customNumberField: {
    '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
      '-webkit-appearance': 'none',
      margin: 0,
    },
    '& input[type="number"]': {
      '-moz-appearance': 'textfield',
    },
  },
});

function MyComponent() {
  const classes = useStyles();

  return (
    <TextField
      className={classes.customNumberField}
      label="Number"
      type="number"
      // other props
    />
  );
}
Abhishek Patel
  • 258
  • 3
  • 10
0

A little late, but I've hit upon this recently and yes, it's possible using the sx prop:

<TextField
 sx={{
 "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
                          display: "none",
                        },
"& input[type=number]": {
                          MozAppearance: "textfield",
                        },
}}
id="outlined-number"
label="Number"
type="number" 
/>
Narcis
  • 33
  • 3