Skip to content
ui.anuragroy.dev

Browse components

← All components

Input Otp

One-time password slots with optional separators.

Install
npx shadcn@latest add https://ui.anuragroy.dev/r/input-otp.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal
npx shadcn@latest add https://ui.anuragroy.dev/r/input-otp.json

GitHub fallback if the website is down:

Terminal
npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/input-otp.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/input-otp.

Import
import {  InputOTP,  InputOTPGroup,  InputOTPSeparator,  InputOTPSlot} from "@/components/ui/input-otp"
example.tsx
import {  InputOTP,  InputOTPGroup,  InputOTPSeparator,  InputOTPSlot,} from "@/components/ui/input-otp"export function Example() {  return (    <InputOTP length={6}>      <InputOTPGroup>        <InputOTPSlot />        <InputOTPSlot />        <InputOTPSlot />      </InputOTPGroup>      <InputOTPSeparator />      <InputOTPGroup>        <InputOTPSlot />        <InputOTPSlot />        <InputOTPSlot />      </InputOTPGroup>    </InputOTP>  )}

API Reference

InputOTP

Base UI OTP field. Render exactly `length` slots.

PropTypeDefault
lengthnumber—