Input OTP - Code MFA

Un input OTP est un composant d'interface composé de 6 champs pour saisir un code de vérification reçu par e-mail.

InputOTP - Bandeau

Il sert à authentifier l'utilisateur en confirmant son identité dans des processus critiques tels que la réinitialisation de mot de passe ou la validation d'inscription. Chaque champ permet de saisir un chiffre spécifique, facilitant la saisie du code.

 

Localisation :

Il est généralement localisé dans des étapes de connexion ou de confirmation, apparaissant au sein de formulaires d'authentification ou de validation dans le parcours utilisateur.


Infobulle

L'option infobulle permet d'afficher une icône à côté du label qui fournit des informations contextuelles lorsqu'elle est survolée (ou au focus) ou cliquée à l'aide du composant infobulle.

Infobulle

Texte d'aide

Le texte d'aide donne des indications supplémentaires sur le champ de saisie, comme la manière dont il sera utilisé. Il ne doit occuper qu'une seule ligne pour simplifier sa compréhension.

Il doit décrire le format attendu, si celui-ci est spécifique.

Texte d'aide

Message d'erreur

Le message d'erreur vient apporter des informations supplémentaires à l'utilisateur lors de la complétion ou lors de la validation d'un formulaire.

Il doit expliciter la cause de l'erreur, et fournir une suggestion de correction si nécessaire.

Message d'erreur

Comportement général

Le comportement général est similaire à celui d'un champ de texte, il comprend les aspects suivants :

 

Saisie de texte :

Les utilisateurs peuvent entrer du texte dans le champ en utilisant le clavier ou d'autres dispositifs d'entrée appropriés. Le texte saisi s'affiche en temps réel dans le champ de texte.

 

Édition de texte :

Les utilisateurs peuvent sélectionner, copier, couper et coller du texte à l'intérieur du champ. Ils peuvent également déplacer le curseur de texte pour effectuer des modifications ou naviguer à travers le contenu.

 

Réactivité au clavier :

Les champs de texte doivent permettre la navigation au clavier en utilisant les flèches directionnelles pour passer d'un champ à l'autre.

 

Retour visuel :

Les champs de texte doivent fournir un retour visuel clair pour indiquer l'état du champ, tel que la mise en évidence lorsque le champ a le focus ou lorsqu'il y a une erreur de saisie.

 

Effacement du contenu :

Les utilisateurs doivent avoir la possibilité d'effacer ou de supprimer le contenu du champ de texte, que ce soit en utilisant la touche de suppression ou en cliquant sur un bouton d'effacement intégré.

 

Validation de saisie :

Les champs de texte peuvent inclure des mécanismes de validation pour vérifier que la saisie répond à certaines conditions, par exemple en vérifiant la longueur du texte, le format ou l'exactitude des données saisies.

 

Compatibilité avec les dispositifs tactiles :

Les champs de texte doivent prendre en charge les interactions tactiles pour les utilisateurs qui interagissent avec l'interface via des écrans tactiles, en permettant la saisie et la modification du texte de manière intuitive.