Input OTP

One-time code slots using input-otp.

Input OTP

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Installation

1pnpm dlx shadcn@latest add @glasswave/input-otp

Usage

1import {2  InputOTP,3  InputOTPGroup,4  InputOTPSlot,5  InputOTPSeparator,6} from "glasswave";7 8<InputOTP maxLength={6}>9  <InputOTPGroup>10    <InputOTPSlot index={0} />11    …12  </InputOTPGroup>13  <InputOTPSeparator />14  <InputOTPGroup>…</InputOTPGroup>15</InputOTP>

API Reference

See the input-otp documentation.