Input OTP

Un champ pour saisir un code à usage unique.

BetaWhoa UI est en bêta : certains éléments peuvent encore changer. Un bug ? Écrivez-moi à hello@ugolin-olle.com.

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

input-otp.tsx

'use client';import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp';export default function Demo() {  return (    <InputOTP maxLength={4}>      <InputOTPGroup>        {[0, 1, 2, 3].map((index) => (          <InputOTPSlot index={index} key={index} />        ))}      </InputOTPGroup>    </InputOTP>  );}

Animation

Les cases suivent la couleur et l'anneau de focus en 120 ms ; le caret clignote, et s'arrête sous prefers-reduced-motion.

Les jetons et les règles communes sont décrits sur la page Motion.

Installation

Le composant fait partie des primitives shadcn/ui sur Base UI.

bunx --bun shadcn@latest add input-otp

Ou depuis le paquet npm :

import { InputOTP } from '@whoa-studio/ui/input-otp';

Exports : InputOTP, InputOTPGroup, InputOTPSlot.