Forms

OTP Field

Captures multi-slot one-time passwords and verification codes with keyboard and paste coordination.

idle

Usage

import { OTPField, OTPFieldInput } from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<OTPField>
	<OTPFieldInput />
</OTPField>

Examples

Verify your account

Enter the code sent to your registered device.

Control sizes

Privacy and validation

Recommendations

Guidance	Practice
Do	State the code length and delivery method. Allow paste and show verification errors near the field.

Usage boundaries

Guidance	Boundary
Scope	Completing the slots does not verify the code. Expiry, rate limits, and verification belong to the server.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`length`	`number`	`—`	Number of characters and slots in the one-time code.
`value`	`string`	`—`	Controlled string value across all input slots.
`defaultValue`	`string`	`—`	Initial value for uncontrolled field presentation.
`onValueChange`	`(value: string, eventDetails: OTPFieldPrimitive.Root.ChangeEventDetails) => void`	`—`	Callback fired when the entered value changes.
`onValueComplete`	`(value: string, eventDetails: OTPFieldPrimitive.Root.CompleteEventDetails) => void`	`—`	Callback fired when all slots are filled.
`validationType`	`"numeric" \| "alpha" \| "alphanumeric" \| "none"`	`"numeric"`	Input validation mode applied to entered characters.
`mask`	`boolean`	`false`	Obscures entered characters for sensitive verification codes.
`autoComplete`	`string`	`"one-time-code"`	Autocomplete attribute applied to the first slot and hidden input.
`disabled`	`boolean`	`false`	Prevents user interaction across all slots.
`readOnly`	`boolean`	`false`	Presents slots in a non-editable readable state.
`required`	`boolean`	`false`	Ensures a value is provided before submitting an enclosing form.
`name`	`string`	`—`	Field name submitted with form data.
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Sets control dimensions across input slots and separators.
`OTPField`	`OTPFieldProps`	`"div"`	Root container coordinating OTP state, keyboard navigation, and slot layout.
`OTPFieldInput`	`OTPFieldInputProps`	`"input"`	Individual digit slot input handling typing, backspace, and navigation.
`OTPFieldSeparator`	`OTPFieldSeparatorProps`	`"div"`	Visual divider separating groups of input slots.
`OTPFieldPrimitive`	`typeof BaseOTPField`	`—`	Low-level Base UI OTP field primitive namespace.