TIPS input

TIPS is an HTML input for numbers, but it’s a number input built from a text input. I created a GitHub repo to publish TIPS wired up as a Preact component, and that repo has a GitHub Pages demo site there for you to play with it.

Compare the browser’s native type=“number” field with a TIPS input: a type=“text” field that uses inputmode, pattern, and size to accept numbers and to return a number value if you are using it for a controlled input in React.

Try it in dark mode too: with Firefox (as shown in the screenshot above), the native number field keeps its light-colored arrows in dark mode, while the TIPS input does not. Use TIPS to get rid of that ugliness!