PinInput #

Used for capturing pin codes or one-time passwords (OTP) from users.

Import #

import { PinInput } from 'rsuite';

Examples #

Basic #

Sizes #

Length #

Customize number of inputs with the length prop.

Mask #

Mask inputs (password style) using the mask prop.

Attached #

Remove spacing between inputs with the attached prop.

One time code #

Use the otp prop to optimize for one-time password (OTP) input.

Placeholder #

Set placeholder text with the placeholder prop.

Disabled #

Disable inputs using the disabled prop.

Read Only #

Set inputs to read-only via the readOnly prop.

Type #

Define and filter input characters via the type prop (default: number).

Controlled #

Controlled usage with value, onChange, and onComplete props.

Accessibility #

ARIA properties #

• Each PIN input uses role="textbox" and a hidden <input type="hidden"/> for form submission.
• When otp is true, inputs have autocomplete="one-time-code"; otherwise autocomplete="off".

Keyboard interactions #

• Typing a character into an input moves focus to the next input.
• Pressing Backspace clears the current input or moves focus to the previous input when empty.
• ArrowLeft and ArrowRight navigate between input fields.
• Pasting content populates inputs sequentially, filtering based on allowedKeys.

Props #

<PinInput> #

Property	Type (Default)	Description
attached	boolean	Whether input fields are attached
autoFocus	boolean	Auto-focus on the first input on mount
classPrefix	string ('pin-input')	The prefix of the component CSS class.
defaultValue	string	Default PIN value (uncontrolled)
disabled	boolean	Whether to disable PIN input
length	number (4)	Number of PIN digits.
mask	boolean	Whether to mask PIN input (like password)
name	string	Name for form submission
onChange	(value: string) => void	Callback fired when the PIN value changes
onComplete	(value: string) => void	Callback fired when the PIN input is completed
otp	boolean	Optimize for one-time password (OTP) input
placeholder	string	Placeholder for input fields
readOnly	boolean	Whether the input is read-only
size	'lg' | 'md' | 'sm' | 'xs' ('md')	Input size
type	'number' | 'alphabetic' | 'alphanumeric' | RegExp ('number')	Filter input characters by type
value	string	PIN value (controlled)