Material UI: Remove up/down arrow dials from TextField

Question

I have this TextField in Material UI:

<TextField
      id="contact phone number"
      label="Contact phone number"
      type="number"
      value={this.state.contactPhoneNumber}
      onChange={this.handleChange('contactPhoneNumber')}
      placeholder="Contact phone number"
      margin="normal"
/>

It looks like this:

How would I remove the up and down arrow dials from the TextField?

Like Allen G said, `type="tel"` seems to work great https://jsfiddle.net/w5246Lzd/1/ — Red Mercury, Jun 12 '18 at 18:11

score 41 · Answer 1 · answered Jun 12 '18 at 18:59

41

You can try css approach for that.

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

answered Jun 12 '18 at 18:59

Shubhanu Sharma

1,957
12
30

Works For me. If you don't want to affect all input then you can add class to TextField and use like this: .mui-number-field { input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } } – rahulxyz Nov 27 '21 at 18:48

score 28 · Accepted Answer · answered Jun 12 '18 at 18:05

28

From the TextField 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.

answered Jun 12 '18 at 18:05

Allen G

438
4
6

If you can share a way to format the number like a telephone number I'll blow you more points – etayluz Jun 12 '18 at 20:00
3

This solution worked for me, one thing I am wondering is how I can get back the number data type validation I had with type="number"? – Trevor Njeru Aug 23 '20 at 01:05
2

I've downvoted because whilst this is a quick fix, it removes all validation that the contents be a valid float or integer, meaning you have more work to do in your form validation. The removal of the arrows via css (other answers) would retain the numeric constraint whilst still fixing the problem. – thclark Jan 05 '22 at 09:40

Ali Askari · Answer 3 · 2022-06-19T01:05:20.633

In React v 17.0.2 and Material-UI v 4.11.4, this works for me:

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

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

export default function MyComponent() {
  const classes = useStyles();
  return <TextField className={classes.input} />;
}

score 18 · Answer 4 · answered Jan 25 '22 at 11:36

18

For Material UI version 5

const Input = styled(MuiInput)(({ theme }) => ({
  "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
    display: "none",
  },
  "& input[type=number]": {
    MozAppearance: "textfield",
  },
}));

And then use it as

<Input 
      id="contact phone number"
      label="Contact phone number"
      type="number"
      value={this.state.contactPhoneNumber}
      onChange={this.handleChange('contactPhoneNumber')}
      placeholder="Contact phone number"
      margin="normal"
/>

answered Jan 25 '22 at 11:36

Rohan Sharma

1,416
2
14
19

2

For those whose TypeScript complains about MuiInput not being found, just put TextField instead of MuiInput. Thanks for the answer. – Kerem Nayman Jul 17 '22 at 16:20
This is the correct answer using mui v5 – Hippolyte BRINGER Sep 29 '22 at 10:26

Jain · Answer 5 · 2020-11-30T10:23:05.960

This works for me (css help: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp)

input: {
    background: theme.palette.secondary.main,
    border: `1px solid white`,
    flex: 1,
    padding: '8px',
    '&[type=number]': {
      '-moz-appearance': 'textfield',
    },
    '&::-webkit-outer-spin-button': {
      '-webkit-appearance': 'none',
      margin: 0,
    },
    '&::-webkit-inner-spin-button': {
      '-webkit-appearance': 'none',
      margin: 0,
    },
  },

score 5 · Answer 6 · answered Jan 23 '22 at 20:59

5

Material-Ui v5 beta

    MuiInput: {
      styleOverrides: {
        root: {
          '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button':
            {
              display: 'none',
            },
          '& input[type=number]': {
            MozAppearance: 'textfield',
          },
        },
      },
    },

answered Jan 23 '22 at 20:59

Justin St. Germain

309
3
5

2

Replacing MuiInput with MuiTextField in your answer worked for me as I am using TextField from MUI. Thanks – Anup Bangale Feb 08 '23 at 12:02

EmrahYT · Answer 7 · 2021-10-15T10:48:14.677

The question is old but maybe this answer may help those who are still seeking a valid answer.

If you use an outlined textfield you can create a class like,

textfieldClass: {
'& .MuiOutlinedInput-input': {
  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
    '-webkit-appearance': 'none',
},
}

},

If you use underlined textfield;

textfieldClass: {
 '& .MuiInput-input': {
  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
    '-webkit-appearance': 'none',
  },
 }
},

then you can use it in TextField like:

<TextField
  className={classes.textfieldClass}
  id="contact phone number"
  label="Contact phone number"
  type="number"
  value={this.state.contactPhoneNumber}
  onChange={this.handleChange('contactPhoneNumber')}
  placeholder="Contact phone number"
  margin="normal"

/>

score 1 · Answer 8 · answered Aug 01 '22 at 15:03

In my case, if I set it as type=tel then, I will be able to type letters also inside the field which I do not want it. Instead, I did the below one and it worked for me

 const StyledInput= styled(OutlinedInput)`
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    display: none;
  }`;

 <StyledInput
                type="number"
                inputProps={{ min: 0 }}
                onChange={event => {
                   ...
                }}
 />

score 0 · Answer 9 · answered Oct 15 '21 at 10:51

0

Just change the type="number" to type="tel"

answered Oct 15 '21 at 10:51

Sahil Rajpal

510
4
8

score 0 · Answer 10 · answered Jul 17 '23 at 12:15

To add to the existing answers, here is a way of removing the up/down arrow icons using the sx prop (MUI 5):

<TextField
 sx={{
 "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
                          display: "none",
                        },
"& input[type=number]": {
                          MozAppearance: "textfield",
                        },
}}
type="number"
/>

score -1 · Answer 11 · edited Jun 15 '22 at 04:09

-1

Change TextField attribute type from number to tel

For Example:

<TextField label="Phone No" type="number" required />

To

<TextField label="Phone No" type="tel" required />

edited Jun 15 '22 at 04:09

Saeed Zhiany

2,051
9
30
41

answered Jun 11 '22 at 19:51

Aman

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Nikolai Kiselev Jun 12 '22 at 09:05

Material UI: Remove up/down arrow dials from TextField

11 Answers11

Linked