REACT-NATIVES
WIRED FOR SPEED
react-natives v2.2.0
Theme
Light
Dark
Get Started
Menu
Components
Form Controls
PinInput
A multi-field input for entering PIN codes or OTP verification codes.
Example
Preview
Code
Props
PinInput Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes to apply to the pin input container.
length
number
4
The number of input fields to render.
value
string
—
The current pin value.
onChange
(value: string) => void
—
Callback invoked when the pin value changes.
size
'sm' | 'md' | 'lg'
'md'
Controls the size of the pin input fields.
isDisabled
boolean
false
When true, disables all pin input fields.
PinInputField Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for an individual pin field.
index *
number
—
The zero-based index of this pin field.
Usage Guidelines
When to use
Use PinInput for OTP verification, PIN entry, or any fixed-length code input.
Best practices
•
Auto-focus the next field as the user types each character.
•
Support paste to fill all fields at once from clipboard.
•
Use secureTextEntry for sensitive codes like banking PINs.
Accessibility
PinInput announces field position (e.g., "digit 1 of 4"). Focus automatically moves between fields. Backspace moves to the previous field.
Related Components
Input
A compound text input component with support for leading/trailing slots, icons, and multiple visual variants.
FormControl
A compound wrapper that provides shared state (disabled, invalid, required, read-only) to its label, helper text, and error message children.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.