How to hide arrows from input number in react?
June 11, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To hide arrows from the input number in react, add the below css in your App.css file it will remove arrows from your all input type number.
/* Works for Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Works for Firefox */
input[type="number"] {
-moz-appearance: textfield;
}Today, I’m going to show you how do I make input type number without up and down arrows in react, react mui, and react antd.
Looking for an example of hide input type number in html, bootstrap, and angular.
Hide arrows from input type number in html, bootstrap, and angular
Let’s start the tutorial How to hide arrows from input number in react
React hide arrows from input number
In this example, we will create a number input in react and remove arrows css to remove arrows from the input.
App.js
import React from "react";
import "./styles.css";
const App = () => {
return (
<div>
<h3>Hide arrows of input number in react</h3>
<input type="number" id="inputID" placeholder="Your text here" />
</div>
);
};
export default App;Here, the CSS files changes to hide arrows from the input.
styles.css
/* Works for Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Works for Firefox */
input[type="number"] {
-moz-appearance: textfield;
}Check the output of the above code example.
Try the below codesandbox link to customize the above example as per your requirements.
hide arrows from React mui textfield
In this example, we will create a mui textfield type number in react and remove arrows css to remove arrows from the input.
App.js
import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import "./styles.css";
export default function BasicTextFields() {
return (
<Box component="form" noValidate autoComplete="off">
<TextField
type="number"
id="outlined-basic"
label="Age"
variant="outlined"
/>
</Box>
);
}Here, the CSS files changes to hide arrows from the input.
styles.css
/* Works for Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Works for Firefox */
input[type="number"] {
-moz-appearance: textfield;
}Check the output of the above code example.
Try the below codesandbox link to customize the above example as per your requirements.
hide arrows from React mui antd
ant design is a little bit different above solution does not work for antd number input but you can use controls={false} to hide up and down arrows from InputNumber.
App.js
import { InputNumber } from "antd";
const onChange = (value) => {
console.log("changed", value);
};
const App = () => (
<InputNumber
min={1}
controls={false}
max={10}
defaultValue={3}
onChange={onChange}
/>
);
export default App;Check the output of the above code example.
Try the below codesandbox link to customize the above example as per your requirements.
All the best 👍