react-smart-inputs

Smart, production-ready React input components. Zero dependencies. Full TypeScript.

Install

npm install react-smart-inputs

Components

| Component | Description | |---|---| | OtpInput | OTP/PIN input with auto-advance, paste support, keyboard nav | | PasswordInput | Password field with real-time strength meter and rules | | TagsInput | Tag/chip input with validation and max limit | | PhoneInput | Phone input with flag dropdown and 24 countries | | CurrencyInput | Currency input with auto-format and locale symbols | | SearchInput | Search input with debounce and loading spinner |

Quick Start

import { OtpInput, PasswordInput, TagsInput,
         PhoneInput, CurrencyInput, SearchInput } from 'react-smart-inputs';

// OTP
<OtpInput length={6} onComplete={(otp) => verify(otp)} />

// Password with strength
<PasswordInput showStrength showRules onChange={(val) => setPassword(val)} />

// Tags
<TagsInput max={5} onChange={(tags) => setTags(tags)} />

// Phone with flag
<PhoneInput defaultCountry="US" onChange={(phone) => setPhone(phone)} />

// Currency
<CurrencyInput currency="USD" onChange={(val) => setAmount(val)} />

// Search with debounce
<SearchInput debounce={300} onSearch={(q) => search(q)} />

Props

All components share:

| Prop | Type | Default | Description | |---|---|---|---| | size | 'sm' \| 'md' \| 'lg' | 'md' | Input size | | label | string | - | Field label | | hint | string | - | Helper text | | error | string | - | Error message | | disabled | boolean | false | Disable the input |

Theme with CSS variables

:root {
  --rsi-primary: #2563eb;      /* brand color */
  --rsi-radius: 8px;           /* border radius */
  --rsi-font: Inter, sans-serif;
}

License

MIT © dhammika_kekulawala