Primitive · CLI
OTP Field
Soft-rect OTP digit slots with whileFocus settle (~160ms easeOutExpo) on Base UI.
Preview
npx shadcn@latest add @atroui/otp-fieldInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/otp-fieldSource lands in your repo. Installation · Registry
Usage
Wrap in Field for accessible name and validation. whileFocus settle is per-slot only — peers stay still.
tsx
import {
OTPField,
OTPFieldInput,
OTPFieldSeparator,
} from "@/components/ui/otp-field"
<OTPField length={6}>
<OTPFieldInput />
<OTPFieldInput aria-label="Digit 2 of 6" />
<OTPFieldInput aria-label="Digit 3 of 6" />
<OTPFieldSeparator />
<OTPFieldInput aria-label="Digit 4 of 6" />
<OTPFieldInput aria-label="Digit 5 of 6" />
<OTPFieldInput aria-label="Digit 6 of 6" />
</OTPField>OTP Field