PinInput
PIN or OTP input with auto-focus
Import: import { PinInput } from 'react-native-mantine';
Usage
import { PinInput } from 'react-native-mantine';
<PinInput
length={6}
type="number"
mask={true}
value={pin}
onChange={setPin}
onComplete={(value) => console.log('PIN complete:', value)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 4 | Number of input fields to display |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | "sm" | Controls input size - affects width, height, and font size of each input field |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | Key of theme.radius or any valid number to set border-radius of each input |
mask | boolean | false | If true, input values will be masked with bullet character (•) like a password input |
type | 'number' | 'alphanumeric' | "number" | Type of input - "number" allows only digits, "alphanumeric" allows letters and numbers |
value | string | Controlled value of all inputs combined. If provided, component becomes controlled | |
defaultValue | string | Default value for uncontrolled mode | |
onChange | (value: string) => void | Callback fired when any input value changes, receives the combined value of all inputs | |
onComplete | (value: string) => void | Callback fired when all inputs are filled, receives the complete value | |
disabled | boolean | false | If true, all inputs will be disabled and not respond to user interactions |
error | boolean | false | If true, inputs will display error state with red border |
spacing | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | "sm" | Spacing between input fields |
style | ViewStyle | Additional styles to apply to the container wrapping all inputs | |
inputStyle | TextInputStyle | Additional styles to apply to each individual input field |