Create a Numbers only Input field in React.js

avatar

Borislav Hadzhiev

Last updated: Apr 10, 2022

banner

Photo from Unsplash

Create a Numbers only Input field in React.js #

To create an input field with only numbers allowed in React.js:

  1. Set the type of the input field to text.
  2. Add an onChange event handler that removes all non-numeric values.
  3. Keep the input value in a state variable.

number only input

App.js
import {useState} from 'react'; const App = () => { const [value, setValue] = useState(''); const handleChange = event => { const result = event.target.value.replace(/\D/g, ''); setValue(result); }; console.log(value); console.log(typeof value); console.log(Number(value)); return ( <div> <div>!Hello 123 World 456?___</div> <input type="text" placeholder="Your fav number" value={value} onChange={handleChange} /> </div> ); }; export default App;

We used the useState hook to keep track of the input field's value.

Every time the input's value is changed, the handleChange function is triggered.

We passed the following 2 parameters to the String.replace method to remove all non-digit characters.

NameDescription
regexpa regular expression we want to match in the string
replacementthe replacement for each match

The \D character matches a character that is NOT a digit.

We have added the g (global) flag to match all non-digit characters and replace them with an empty string.

This means that if the string only contains non-digit characters we would replace all of them with empty strings and the String.replace method would return an empty string.

You might have to handle the scenario where the user doesn't enter any numbers into the input field.

Then the state variable would be an empty string and you might not want to convert an empty string to a number because you'd get 0.

App.js
import {useState} from 'react'; const App = () => { const [value, setValue] = useState(''); const handleChange = event => { const result = event.target.value.replace(/\D/g, ''); setValue(result); }; console.log(value); console.log(typeof value); console.log(Number(value)); // 👇️ validation if (value !== '') { const num = Number(value); // 👉️ submit form } return ( <div> <div>!Hello 123 World 456?___</div> <input type="text" placeholder="Your fav number" value={value} onChange={handleChange} /> </div> ); }; export default App;

You can make sure that the input does not store an empty string value and then convert the value to a number.

Alternatively, you can use an input type number, but that would allow the user to enter characters like e, -, ., etc.

App.js
import {useState} from 'react'; const App = () => { const [value, setValue] = useState(''); const handleChange = event => { setValue(event.target.value); }; console.log(value); console.log(typeof value); console.log(Number(value)); return ( <div> <div>.Hello- 123 World 456?___</div> <input type="number" placeholder="Your fav number" value={value} onChange={handleChange} /> </div> ); }; export default App;

Note that even though the input has its type set to number, its value is still of type string.

This approach also allows the user to enter values like e-123, which you might not want.

input type number

In general, I'd advice against using this approach as it's much more browser dependent - different browsers might handle an input type number differently.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.