Specialized Form Inputs

For general form architecture see Forms. This page is the long tail of "I need a really good X input."

Phone numbers

• ★ libphonenumber-js — Google's libphonenumber port; format, parse, validate. The validation library; pair with the input component you choose.
• ★ react-phone-number-input — wraps libphonenumber-js; flag dropdown, format-as-you-type.
• react-international-phone — newer alternative, smaller bundle.
• intl-tel-input — vanilla; Vue / React wrappers exist.

Country / region pickers

• react-select-country-list, react-country-flag — flags + names.
• world-countries, i18n-iso-countries — datasets.
• countries-list — names, codes, currencies, calling codes.
• @happy-day/country-state-city — country / state / city cascading.

Currency / money

• ★ Intl.NumberFormat — built into the platform; handles currency formatting in any locale. Use first.
• ★ dinero.js v2 — immutable money objects; arithmetic without floating-point bugs.
• currency.js — simpler currency math; no Intl features.
• @types/currency-codes, country-currency-map — datasets.

Address fields / autocomplete

• @react-google-maps/api + Places — Google Places autocomplete.
• Mapbox Search Box / Address Autofill — alternative; see Maps & Geo.
• react-places-autocomplete — older Google Places wrapper.
• Smarty US Autocomplete — for US addresses with rooftop accuracy.

Masked / formatted inputs

• ★ react-imask + imaskjs — credit cards, dates, phones, custom masks.
• react-input-mask — older, simpler.
• cleave.js — vanilla; popular.

Credit cards specifically

• react-payment-inputs — card number / expiry / CVV inputs with detection.
• @stripe/react-stripe-js — preferred for any actual payment; the card data never touches your server.

OTP / one-time-code inputs

• ★ input-otp (used by shadcn/ui) — accessible OTP boxes, paste-friendly. The default.
• react-verification-input — alternative.
• WebOTP API — autofill SMS codes on Android; pair with the input above.

Password inputs

• zxcvbn-ts — password strength scoring (Dropbox's zxcvbn, TS port); pair with a meter UI.
• @zxcvbn-ts/core — split language packs for smaller bundles.
• HaveIBeenPwned API — k-anonymity check against breaches.

Color picker

• ★ react-colorful — tiny, accessible color picker. The default.
• react-color — older, bigger.

File input / drop

• ★ react-dropzone — drag-and-drop; minimal.
• Uppy — full upload UI (see File Uploads).

Tag / chip / multi-select

• react-tag-input / @yaireo/tagify — tag inputs.
• react-select — heavyweight, mature.
• Downshift — primitive for building autocomplete / select.
• shadcn/ui Select + Combobox — the standard if you're on shadcn.

Pick this if…

• Phone: libphonenumber-js + react-phone-number-input.
• Currency math: dinero.js v2 + Intl.NumberFormat for display.
• Addresses: Mapbox Address Autofill or Google Places.
• OTP: input-otp (used by shadcn).
• Password strength: zxcvbn-ts + a custom meter.
• Color: react-colorful.