Forms

OTPField

One-time codes in separate boxes; paste the whole code at once.

Ant Design: Input.OTP

import { OTPField } from '@alea/ui';

Examples

Type, paste or let the phone fill it in.

Code we sent to ale@example.com

A PIN hides its characters; errors say what to do.

Recovery code

That code expired. Ask for a new one.

One-time codes in separate boxes: paste the whole code, arrows and Backspace move between boxes (Ant's Input.OTP).

Prop	Type	Default	Description
`defaultValue`	`string`	`''`	The code to start with.
`errorMessage`	`ReactNode`	-	The error shown when it is invalid.
`isDisabled`	`boolean`	-	Disables every part of it.
`isInvalid`	`boolean`	-	Marks it invalid and shows errorMessage.
`label`	`ReactNode`	`'Verification code'`	The visible label ("Verification code").
`length`	`number`	`6`	Number of characters. Default 6.
`mask`	`boolean`	-	Hide the characters (PINs).
`name`	`string`	-	Form field name for the joined value.
`onChange`	`((value: string) => void)`	-	Called with the code as it is typed.
`onComplete`	`((value: string) => void)`	-	Called when every box is filled.
`type`	`"numeric" \| "alphanumeric"`	`'numeric'`	numeric (default) or alphanumeric.
`value`	`string`	-	The code (controlled).

A labelled group; each box says which character it is.
The first box has autocomplete="one-time-code", so phones offer the code from SMS.

Don't