A segmented one-time-code input with auto-advance, paste-to-fill, a traveling caret, and error shake.

Masked

Set mask to render entered characters as dots — useful for sensitive codes.

Validation status

status="error" shakes the row; status="success" settles it. Flip back to idle to re-arm the shake.

pnpm dlx shadcn@latest add "https://godui.design/r/otp-input.json"

tsx

import { OTPInput } from "@godui/components";

<OTPInput length={6} onComplete={(code) => verify(code)} />;

Prop	Type	Default	Description
`length`	`number`	`6`	Number of code cells.
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	`""`	Uncontrolled initial value.
`type`	`"numeric" \| "alphanumeric"`	`"numeric"`	Accepted characters.
`mask`	`boolean`	`false`	Render characters as dots.
`status`	`"idle" \| "error" \| "success"`	`"idle"`	Validation state.
`disabled`	`boolean`	`false`	Disable input.
`autoFocus`	`boolean`	`false`	Focus on mount.
`onChange`	`(value: string) => void`	—	Fires on every change.
`onComplete`	`(value: string) => void`	—	Fires when the last cell fills.