MarovStudio
Back to marketplace

OTP Input

Six-digit code field — a pasted code fills every box

Authauthotpcodeverificationpaste
FullscreenCreate free account

Paste the whole code — it fills every box.

Code locked
"use client";

import { useRef, useState } from "react";

export function OtpInput() {
  const [digits, setDigits] = useState(["", "", "", "", "", ""]);
  const refs = useRef<(HTMLInputElement | null)[]>([]);

Sign in to see the code

Create a free account to copy the full source, usage snippet and AI prompt of every component.

Create free accountSign in

Free — no card required.

Related components

Welcome back

Sign in to continue to your dashboard.

or

No account? Create one

Sign In Card

Auth · Sign-in card with a Google button and a password reveal

Create account

Start your free trial. No card required.

Sign Up Card

Auth · Registration card with a consent checkbox

Too short

  • 8+ characters
  • Upper and lower case
  • A number
  • A symbol

Password Strength

Auth · A meter that scores what was actually typed