Why Rxova React Inputs
Headless, accessible, zero-dependency. Nine React input components covering localized
currency formatting, fractional ratings, one-time codes, passwords, phone numbers, dates,
times, tags and files.
The same design principles throughout: one native <input> where it matters, native
form submission, keyboard and screen-reader support, and a small typed API backed by
tests. No stylesheet to import.
The suite
Section titled “The suite”
Currency
A currency <input> that is correct in every language — Bulgarian spaces,
Japanese yen, Hindi lakhs, Arabic digits — because it reads every locale fact from
Intl.NumberFormat instead of hardcoding “a comma every three digits”. No cursor
jumps.
Rating
Exact partial fills for any icon — SVG, emoji, images or custom JSX — that becomes a fully
accessible input the moment you add onChange. One component, two modes: a
read-only score and an interactive form control.
OTP
A one-time-code input with one native <input> underneath and slots painted
on top — so paste, SMS autofill, IME and native form submission come from the platform, and
you can tap any slot to edit it.
Password
A reveal toggle that keeps the caret, a Caps Lock warning read off the real modifier, a requirements checklist, and a strength meter that costs about 1 kB instead of the 400 kB a wordlist estimator costs.
Phone
International numbers with no metadata blob: country names from
Intl.DisplayNames, flags from Unicode, and about 4 kB of dial codes. E.164 in and
out, so the grouping a country happens to use never becomes a database concern.
Date
A segmented, keyboard-first date field with no calendar and no date library. Ordered by locale
through Intl, and valued as a YYYY-MM-DD string — never a
Date, which would drag a timezone into a calendar date.
Time
A segmented time field with no clock popup. 12- or 24-hour by locale, and always valued as
canonical 24-hour HH:mm, so a stored time sorts and compares without knowing
which locale produced it.
Tags
Tags and tokens where the keyboard actually works: one tab stop for the whole list, focus that
never lands on <body> after a removal, and a two-step Backspace that shows
you what you are about to delete.
File
A picker and drop zone that validates, deduplicates and revokes its own preview URLs — and
never uploads anything. You get the File objects; the transport stays yours.
Shared conventions
Section titled “Shared conventions”Every component emits a plain value from onChange rather than an event, posts natively under
name, ships zero runtime dependencies and no stylesheet, and is documented with a live playground
plus an API reference generated from source with TypeDoc.
The value’s type follows the thing being collected, and they differ on purpose: a number for
currency and rating, a string for otp, password and phone, a string | null for date and time,
a string[] for tags, and a File[] for file. Styling hooks follow one scheme —
--rx-<component>-* and data-rx-<component>-* — with the state hooks (data-invalid,
data-disabled, data-readonly, data-focused) deliberately unprefixed, so one selector reaches
every input in the suite.