Let's create a better Number Input with React and Tailwind CSS

<input type="number" has always been enfant terrible of HTML inputs. Complaints about this input are numerous.

Number input problems

• Inconsistency. Different browsers handle them differently. You can enter only numbers in Chromium based browsers. But you can enter any symbol in Firefox and Safari, though they will show an error popup.

• Complexity. Valid numbers are not just digits. Number input allows negative (-100) and floating point (0.01) values, as well as scientific notation (-2.3e4). Which is helpful sometimes, but not every time.

• Unexpected behavior. Number input will not report the value it considers invalid. Blank string is reported instead. Also, values which have more significant digits than step attribute are considered invalid.

Fortunately, HTML allows us to fix most of these problems. So let's create a better number input. Here is the list of basic features to support.

Numeric input features

• Validates user input in all modern browsers consistently.

• Sets the decimal input mode for on-screen keyboards.

• Can increment and decrement when up or down keys pressed.

Setting input attributes

First thing, we apply native input attributes in order to make it function like we want. I'm going to use pattern attribute to sanitize user's text input.

Available patterns

• (?:0|[1-9]\d*) - Allow only digits, 1234567890

• [+\-]?(?:0|[1-9]\d*) - Allow positive and negative integers, e.g. 1, -2, +3

• [+\-]?(?:0|[1-9]\d*)(?:\.\d+)? - Allow floating integers, e.g. 1.001, -123.9

• [+\-]?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+\-]?\d+)? - Allow scientific notation, e.g. -1.314e12

Here is how our HTML should look like now.

<input
  type="text"
  pattern="(?:0|[1-9]\d*)"
  inputMode="decimal"
  autoComplete="off"/>                

inputMode="decimal" sets proper keyboard for touch devices.

autoComplete="off" is needed to disable annoying browser autocomplete, usually such functionality is needed for name-like inputs.

React component interface

// List of available numeric modes
enum Modes {
    natural = 'natural',
    integer = 'integer',
    floating = 'floating',
    scientific = 'scientific',
}

type Value = string;

export type Props = {
    /** Set controlled value */
    value?: Value;
    /** Provide a callback to capture changes */
    onChange?: (value?: Value) => void;
    /**
     * Define a number to increase or decrease input value
     * when user clicks arrow keys
     */
    step?: number;
    /** Set a maximum value available for arrow stepping */
    max?: number;
    /** Set a minimum value available for arrow stepping */
    min?: number;
    /** Select a mode of numeric input */
    mode?: keyof typeof Modes;
};

export const InputNumeric: FC<Props> = ({
    value,
    step = 1,
    max = Infinity,
    min = -Infinity,
    onChange = () => {},
    mode = Modes.scientific,
}) => {
    //...
}

Now we need to manage pattern attribute according to the mode setting.

const patternMapping = {
    [Modes.natural]: '(?:0|[1-9]\\d*)',
    [Modes.integer]: '[+\\-]?(?:0|[1-9]\\d*)',
    [Modes.floating]: '[+\\-]?(?:0|[1-9]\\d*)(?:\\.\\d+)?',
    [Modes.scientific]: '[+\\-]?(?:0|[1-9]\\d*)(?:\\.\\d+)?(?:[eE][+\\-]?\\d+)?',
};

const pattern = patternMapping[mode];

Handle keystrokes

Here is how to handle arrow key presses.

const handleKeyDown = useCallback(
    (event: KeyboardEvent<HTMLInputElement>) => {
        const inputValue = (event.target as HTMLInputElement).value;
        // handle increment
        if (event.key === 'ArrowUp') {
            // empty input value has to be normalized to zero
            const nextValue = Number(inputValue || 0) + step;
            if (nextValue <= max) {
                onChange(nextValue.toString());
            }
        }
        // handle decrement
        if (event.key === 'ArrowDown') {
            const nextValue = Number(inputValue || 0) - step;
            if (nextValue >= min) {
                onChange(nextValue.toString());
            }
        }
    },
    [max, min, onChange, step]
);

User input validation

We are going to inform user about expected number format violations via input border color and option hint below input.

We are going to use Tailwind CSS to create this design and error reporting functionality.

peer class name is necessary to create a CSS selector for an input error message below. invalid:border-red-600 class name paints border with red color when input is invalid.

invisible class sets visibility:hidden for the hint message by default. peer-[:invalid]:visible class unwraps to the following selector .peer:invalid ~ .peer-\[\:invalid\]\:visible which makes hint visible when it's preceded by the input.peer in :invalid state.

export const InputNumeric: FC = () => {
    const id = useId();
    return (
        <fieldset>
            <label htmlFor={id}>
                Numeric input
            </label>
            <input
                id={id}
                className="peer invalid:border-red-600"
                aria-describedby={`${id}-helper-text`}
            />
            <div
                className="invisible peer-[:invalid]:visible"
                id={`${id}-helper-text`}>
                Please provide valid decimal number
            </div>
        </fieldset>
    );
}

Here is full Numeric input code:

Happy coding!