Component

Input OTP

A compact one-time code input with copy-paste support through a hidden native input.

Preview

Enter the code sent to your inbox.

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { InputOtp } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/input-otp.json

Copied source import

code

import "@/styles/axie.css";import { InputOtp } from "@/components/axie/input-otp";

Prefer @axie/input-otp? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { InputOtp } from "axie-ui";export function Example() {  return <InputOtp length={6} />;}

Accessibility

Keep the hidden native input available for paste and mobile keyboard behavior.
Use a label or surrounding field that explains which code is expected.
Do not auto-submit without giving users a way to correct the code.

Invalid

Use aria-invalid to show an error state on every slot.

Disabled

Disabled slots keep their dimensions stable.

API Reference

Prop	Type	Default	Description
length	number	6	Number of visible slots.
pattern	RegExp	/\d/	Character filter used before committing a value.
value	string	-	Controlled input value.
onValueChange	(value: string) => void	-	Called with the sanitized value.