PinInput

One-time-code / PIN entry with separate cells and a single hidden input, so paste and autofill work.

Usage

import {PinInput} from 'rn-inkpad';

<PinInput length={6} onComplete={verify} autoFocus />
<PinInput length={4} secure variant="underline" />
<PinInput length={4} defaultValue="1234" error />

Props

Name	Type	Default	Description
length	number	4	Number of cells.
value	string		Controlled value.
defaultValue	string	''	Initial value (uncontrolled).
onChange	(value: string) => void		Called on every change.
onComplete	(value: string) => void		Called once all cells are filled.
secure	boolean	false	Masks the digits.
numeric	boolean	true	Accept digits only.
keyboardType	KeyboardTypeOptions	number-pad	Keyboard.
autoFocus	boolean	false	Focus on mount.
disabled	boolean	false	Disables input.
error	boolean	false	Error state (red border).
variant	'box' | 'underline'	box	Cell style.
size	number	48	Cell size.
gap	number	10	Space between cells.
radius	number	theme radius md	Cell radius (box).
color	string	theme primary	Focused cell color.
borderColor	string	theme border	Idle cell color.
focusedColor	string	color	Focused cell color.
errorColor	string	theme error	Error color.
textColor	string	theme text	Digit color.
backgroundColor	string	theme surface (box)	Cell background.
style, cellStyle, textStyle	StyleProp		Custom styles.