Quick start
Every rxova input is a controlled component: give it a value and an
onChange and it behaves like any other form field. onChange always hands you
the value — never a DOM event — so these drop straight into a form library’s
controlled adapter. Here are three of the nine; the rest follow the same shape.
import { useState } from 'react'import { CurrencyInput, Rating, OtpInput } from '@rxova/react-inputs'
function Example() { const [price, setPrice] = useState<number | null>(null) const [score, setScore] = useState(0) const [code, setCode] = useState('')
return ( <> <CurrencyInput locale="en-US" currency="USD" value={price} onChange={setPrice} /> <Rating value={score} onChange={setScore} precision={0.5} label="Rate your meal" /> <OtpInput length={6} value={code} onChange={setCode} /> </> )}That single install covers all nine. If you’d rather depend on just one, the
individual packages (@rxova/react-intl-currency-input,
@rxova/react-rating-input, @rxova/react-otp-input) are equivalent — install
the one you want and import from its own name instead. See
Installation for the trade-off, which is
smaller than you’d think.
Each component’s own page has live, editable examples and its full prop reference:
- Currency input — locale-aware money entry with no cursor bugs.
- Rating input — any icon, any precision, accessible.
- OTP input — one-time-code entry with paste and WebOTP support.
- Password input — reveal toggle, Caps Lock warning, 1 kB strength meter.
- Phone input — international numbers, E.164 in and out, no metadata blob.
- Date input — segmented and locale-ordered,
YYYY-MM-DD, no calendar. - Time input — segmented, 12/24-hour by locale, canonical 24-hour value.
- Tags input — delimiters, paste splitting, a real roving tab order.
- File input — picker and drop zone, managed preview URLs, no upload.
Each component’s own About page carries the cross-cutting guides for that component — accessibility, styling tokens, and recipes for React Hook Form, Formik, React Final Form and TanStack Form.