Anatomie

L'écran est une seule motion.div centrée dans un conteneur min-h-screen. De haut en bas : un badge icône circulaire (Mail de Lucide, couleur accent), le titre h1, une ligne de sous-titre et d'email optionnelle, la rangée de chiffres OTP, un bouton de soumission pleine largeur, et un lien de renvoi. La rangée de chiffres parcourt un tableau de chaînes de longueur codeLength et affiche un input texte contrôlé par case.

Comment ça marche

L'état est un tableau de chaînes, une case par chiffre, toutes vides par défaut. handleChange filtre les entrées non numériques avec un test regex, écrit le dernier caractère tapé à l'index correspondant, puis déplace le focus vers l'input suivant via le tableau de refs. handleKeyDown intercepte le Backspace sur une case vide et recule le focus d'un cran. L'animation Framer Motion se joue une fois au montage : opacity 0 à 1, y 20 à 0, sur 600ms avec une courbe spring personnalisée.

Comment le coder en React

1. Initialiser l'état des chiffres et les refs

   Crée un tableau de chaînes vides de longueur codeLength, puis un tableau useRef parallèle pour les inputs. Les refs permettent d'appeler .focus() de façon impérative sans gérer d'index de focus dans l'état.

   const [code, setCode] = useState<string[]>(
     Array.from({ length: codeLength }, () => "")
   );
   const inputRefs = useRef<(HTMLInputElement | null)[]>([]);

2. Gérer la saisie avec avance automatique

   À chaque événement change, rejette tout ce qui n'est pas un chiffre, ne retiens que le dernier caractère (gère le collage d'un seul chiffre), met à jour le tableau, puis donne le focus au slot suivant s'il existe.

   function handleChange(index: number, value: string) {
     if (!/^d*$/.test(value)) return;
     const newCode = [...code];
     newCode[index] = value.slice(-1);
     setCode(newCode);
     if (value && index < codeLength - 1) {
       inputRefs.current[index + 1]?.focus();
     }
   }

3. Revenir en arrière au Backspace

   Quand la case courante est déjà vide et que l'utilisateur appuie sur Backspace, déplace le focus vers la case précédente. La correction devient naturelle sans suivi d'état supplémentaire.

   function handleKeyDown(index: number, e: React.KeyboardEvent) {
     if (e.key === "Backspace" && !code[index] && index > 0) {
       inputRefs.current[index - 1]?.focus();
     }
   }

4. Animer l'entrée de la carte avec Framer Motion

   Entoure le conteneur d'une motion.div avec opacity 0 et y 20 en initial, anime vers opacity 1 et y 0, et passe un tableau ease spring. L'animation se joue une fois au montage et ne dépend pas de l'état interactif.

   const ease: [number, number, number, number] = [0.16, 1, 0.3, 1];
   
   <motion.div
     initial={{ opacity: 0, y: 20 }}
     animate={{ opacity: 1, y: 0 }}
     transition={{ duration: 0.6, ease }}
   >

Quand l'utiliser

Utilise ce composant partout où ton flux d'auth inclut une vérification par email ou téléphone : confirmation d'inscription, double facteur, ou code de réinitialisation de mot de passe. Il convient à l'onboarding SaaS, aux applis fintech, et à tout produit qui doit confirmer la possession d'un appareil ou d'une adresse. À éviter si ton flux utilise un magic link à la place d'un code ; le pattern multi-cases serait trompeur sans chiffres à saisir.

Utilisé par

• Stripe, Utilise une rangée de cases OTP à 6 chiffres pour l'authentification à deux facteurs sur la connexion Dashboard.
• GitHub, Affiche un champ OTP en cases séparées lors de la configuration 2FA et de la vérification d'appareil.
• Linear, L'étape de vérification par email utilise un champ numérique segmenté cohérent avec son design system minimaliste.
• Notion, La confirmation de connexion par email envoie un code à 6 chiffres saisi dans une interface à cases séparées.

FAQ