Component · Form

Input OTP

Input de código numérico segmentado. Use pra OTP de email, 2FA, verificação por SMS. Auto-foco pro próximo slot.

input-otpsource

Import

import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@nimbuslab/lumina/components/input-otp"

6 dígitos

[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; } }

Com separador 3+3

Código

TSX