Things

The Input OTP component provides a user-friendly way to enter one-time passwords. It features automatic focus management, paste support, and keyboard navigation. Built from scratch using React and native HTML elements. No dependencies on any UI library.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/input-otp.json

Usage

tsx

import { InputOTP } from "@/components/ui/input-otp"
import * as React from "react"

function MyComponent() {
  const [otp, setOtp] = React.useState("")

  return (
    <InputOTP
      length={6}
      value={otp}
      onChange={setOtp}
      autoFocus
    />
  )
}

Input OTP

Quick Install

Usage

Examples

Default

Disabled

Custom Length (4 digits)