Material UI: Remove up/down arrow dials from TextView - reactjs

Question

I have this TextView 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 TextView?

Answer 1

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;
}

Answer 2

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.

Answer 3

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} />;
}

Answer 4

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,
},
},

Answer 5

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"
/>

Answer 6

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"
/>

Answer 7

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

Answer 8

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

Answer 9

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 => {
...
}}
/>

Answer 10

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 />