OTP input

A six digit verification flow with paste support and keyboard navigation.

npx shadcn@latest add @silicon-ui/otp-input
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/otp-input

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/otp-input/otp-input.tsx
    • components/silicon-ui/otp-input/otp-input.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { OtpInput } from "@/components/silicon-ui/otp-input/otp-input";

API reference

PropTypeDefault
label*string—
lengthnumber6
valuestring""
onChange(value: string) => void—
descriptionstring—
errorstring—
autoFocusbooleanfalse
disabledbooleanfalse
inputMode"numeric" | "text""numeric"
classNamestring—

Dependencies

npm
motion
Registry
silicon-motion-tokens