Input OTP

This component requires the FyskProvider. See Quick Start →

Preview

OTPInput

TypeScript

bash

1npx shadcn@latest add https://fysk.dev/r/input-otp.json

tsx

1import { OTPInput } from "@/components/ui"
2
3<OTPInput length={6} onChange={(v) => console.log(v)} />

Individual boxed inputs for each character.

Component

TypeScript

Includes condensed (grouped group) and underline styles.

Component

TypeScript

Default

Condensed

Underline

Automatic Focus: Seamlessly moves to the next field as the user types and moves back on backspace.
Paste Support: Handles pasting whole verification codes, splitting them across the appropriate fields.
Validation: Support for numeric, alpha, and alphanumeric restriction modes.
Visual Feedback: Built-in state handling for error, success, and loading (pulse) feedback.

Prop	Type	Default	Description
`length`	`number`	`6`	Number of OTP digits/characters.
`variant`	`"default" \| "condensed" \| "underline"`	`"default"`	Visual style of the input boxes.
`size`	`"default" \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"default"`	The visual size of each OTP input.
`state`	`"idle" \| "loading" \| "success" \| "error"`	`"idle"`	Current validation or submission state.
`inputType`	`"numeric" \| "alphanumeric" \| "alpha"`	`"numeric"`	Type of characters allowed.
`onChange`	`(value: string) => void`	-	Callback returning the full code string.
`Icon`	`React.ReactNode`	-	Custom separator icon for the condensed variant.

Accepts all standard HTML input attributes.