Formulaires

Code de vérification

رمز التحققOTP field

Stablesrc/dsm/components/otp-field.tsx
Saisie segmentée d'un code de vérification à usage unique (SMS, e-mail ou identité numérique). Chaque chiffre occupe sa propre case, avec navigation automatique et prise en charge du collage d'un code complet.

Import

import { OtpField } from "@/dsm/components/otp-field";

Exemples

Simple

Code à 6 chiffres avec aide contextuelle.

LTR

Saisissez le code à 6 chiffres envoyé au 06 12 34 56 78.

États

Code en erreur et champ désactivé.

LTR

Un nouveau code peut être demandé dans 45 secondes.

Usage

Quand l'utiliser

  • Utilisez `OtpField` pour tout code de vérification envoyé par SMS ou e-mail lors d'une authentification à deux facteurs ou de la validation d'un numéro de téléphone.
  • Adaptez `length` à la longueur réelle du code envoyé par votre fournisseur d'identité numérique (souvent 6 chiffres).

Quand ne pas l'utiliser

  • N'utilisez pas `OtpField` pour un code que l'usager choisit lui-même (mot de passe, code PIN personnel) : préférez `PasswordInput` ou plusieurs `Input`.

Accessibilité & langues

Accessibilité

  • Seule la première case porte l'association avec le libellé visible ; les suivantes reçoivent un `aria-label` positionnel (« Chiffre 2 sur 6 ») pour rester compréhensibles au clavier.
  • Le collage d'un code complet dans n'importe quelle case répartit automatiquement les chiffres dans les cases suivantes.

RTL & multilingue

  • Les chiffres restent affichés de gauche à droite au sein de chaque case (`tabular-nums`) ; seul l'ordre des cases suit le sens de lecture du document.

Propriétés

OtpField
PropriétéTypeDéfautDescription
lengthnumber6Nombre de cases (et de chiffres attendus).
label*ReactNode—Libellé visible au-dessus des cases.
hintReactNode—Texte d'aide, par exemple l'origine de l'envoi du code.
invalid / errorboolean / ReactNode—Bascule le style d'erreur ; `error` affiche en plus le message sous les cases.
value / defaultValue / onValueChangestring—Contrôle ou observe le code saisi.

Composants liés