How to restrict user input to hexadecimal value in React?

Active3 hr before
Viewed126 times

8 Answers


Test case: hexadecimal:, About ,When the user clicks on any letter or a number that isn't hexadecimal, the input value would not change. Just like when the input type is number, and the user tries to enter a text.

Add a regex condition inside the handler function would be fine.

/^[0-9a-f]+$/.test(yourValue) // hexadecimal
const {useState} = React;

const App = () => {
  const [value, setValue] = useState("");
  const onChange = e => {
    const input = e.currentTarget.value;
    if (/^[0-9a-f]+$/.test(input) || input === "") {
  return (
    <div className="App">
ReactDOM.render(<App />, document.getElementById("root"));
    <div id="root"></div>
    <script src=""></script>
    <script src=""></script>
load more v

Here's an example that watches changes over time to the color value:,Finally, we call select() to select the text content of the color input if the control is implemented as a text field (this has no effect if a color picker interface is provided instead).,Inputs of type color are simple, due to the limited number of attributes they support.

<input type="color" value="#ff0000">
load more v

 Pretag team - issue, fix, solve, resolve

The task is to validate the input when the user is typing something in the input box. Here we are allowing only decimal and integers but not any other symbol. Here are a few techniques discussed.,How to restrict input box to allow only numbers and decimal point JavaScript?,Each time a character is entered, the whole input is matched with the RegExp to check validity.


 Pretag team - issue, fix, solve, resolve

 Pretag team - issue, fix, solve, resolve

Number input component that can replace the native number input which is not yet very well supported and where it is, it does not have the same appearance across the browsers. Additionally this component offers more flexible options and can be used for any values (differently formatted representations of the internal numeric value).,An external script that does not "understand" React can still work with this component by reading the getValueAsNumber() or by calling the setValue() method exposed on the input element. Here is an example with jQuery:,By default the component displays the value number as is. However, you can provide your own format function that will be called with the numeric value and is expected to return the string that will be rendered in the input:

npm install react - numeric - input--save
load more v

Registering the component with Builder.registerComponent(...) does two things:,An optional default value for this prop. This is useful for showing an example value in the input form when creating a new instance of this component, to better help people using it understand it's purpose,To use our new CodeBlockComponent with any of our Builder content we have to import the file to make sure that it's registered before any calls to BuilderComponent that use it.

 Pretag team - issue, fix, solve, resolve

Other "value-react" queries related to "How to restrict user input to hexadecimal value in React?"