Free and open-source React number input components built for modern applications and websites. These number inputs are built using React Aria and styled with Tailwind CSS.
buttonVariant="stacked" (the default) puts a chevron-up/chevron-down pair at the end of the field, like a native spinner. buttonVariant="inline" puts a full-height minus button before the value and a plus button after it.
Pass formatOptions, a plain Intl.NumberFormatOptions object, e.g. formatOptions={{ style: "currency", currency: "USD" }}. The displayed text is formatted, but the value itself (in onChange, defaultValue, value) stays a plain number.
Pass minValue, maxValue and step. The increment/decrement buttons clamp to those bounds and disable themselves once they're reached; typing or pasting an out-of-range value is clamped on blur.
Yes — the field itself responds to the Up and Down arrow keys (and Page Up/Page Down for larger steps), in addition to typing a value directly.
Pass isInvalid and a hint — the hint switches to the error color automatically, the same as Input.