Introduction

Une entrée segmentée pour les codes courts de longueur fixe — mots de passe à usage unique, SMS/e-mail codes de vérification, codes PIN. Chaque personnage a sa propre boîte, avec clavier navigation, prise en charge du collage/remplissage automatique et même étiquette/texte d'assistance/erreur conventions de texte/validateur comme « Champ ».

Utilisation

import { PinField } from "../components/ui";

export default function MyPage() {
  return (
    <PinField
      label="Verification code"
      helperText="Check your email for the 6-digit code"
      count={6}
      otp
      blurOnComplete
      onValueComplete={(details) => console.log(details.valueAsString)}
    />
  );
}

Format des caractères

format (""numérique"|"alphanumérique"|"alphabétique", par défaut "numérique") restreint ce qu'une boîte accepte et sélectionne le bon clavier mobile via mode d'entrée. Transmettez pattern` avec une source d'expression rationnelle personnalisée par caractère à remplacez-le entièrement – ​​utile pour les codes de style coupon.

<PinField format="alphanumeric" count={8} placeholder="_" />

Remplissage automatique

otp marque le champ comme un code à usage unique SMS/e-mail. Plutôt que de mettre autocomplete="one-time-code" sur chaque case (ce qui rend les navigateurs et les mots de passe les gestionnaires affichent une possibilité de remplissage sur chacun d'eux à la fois), seule la case à laquelle l'utilisateur remplirait ensuite l'annonce - et accepte la longueur complète du code, donc un mobile La suggestion OTP du clavier ou un collage complet peut atterrir d'un seul coup et obtenir redistribué automatiquement dans les cases restantes. Une boîte sur deux opte des superpositions d'icônes de saisie automatique et de gestionnaire de mots de passe.

Comportement du clavier et du pointeur

• Taper un caractère valide remplit la case actuelle et fait avancer le focus ; un le contenu de la boîte déjà focalisée est sélectionné en premier (selectOnFocus, activé par par défaut), donc la saisie remplace toujours plutôt que d'être bloquée silencieusement.
• Retour arrière sur une case vide s'efface et revient à la précédente.- Flèche gauche/droite déplace le focus entre les cases ; Les flèches haut/bas sont supprimé plutôt que de ne rien faire d’utile.
• Coller ou une saisie automatique du système d'exploitation/gestionnaire de mots de passe distribue les caractères à travers les cases en commençant par celle sur laquelle il a atterri.
• Tab et le focus du clic/pointeur s'arrête sur la première case vide – vous ne pouvez pas sautez devant un espace, modifiez uniquement une case déjà remplie ou continuez là où vous laissé tomber.

Validation

Comme Field, PinField accepte un validateur qui s'exécute sur le joint valeur et peut renvoyer « false » (erreur générique) ou une « chaîne » (message personnalisé). Il n'est revalidé qu'une fois que chaque case est remplie.

<PinField
  count={6}
  validator={(value) =>
    value !== "000000" || "That code isn't valid"
  }
  errorText="Enter the code we sent you"
/>

Formulaires : soumission et réinitialisation automatiques

form associe l'entrée de soumission cachée du champ à un <form id> ailleurs dans le document (ou omettez-le si le champ réside déjà dans le formulaire). autoSubmit appelle form.requestSubmit() au moment où chaque case est remplie, après avoir tiré onAutoSubmit ; appuyer sur Entrée dans n'importe quelle case tente également soumettre, car un formulaire avec plusieurs entrées frères supprime le propre du navigateur soumettre sur Entrée. Réinitialisation du formulaire (un <button type="reset"> natif, ou form.reset()) remet le champ à vide.

<form id="verify-form">
  <PinField form="verify-form" name="code" count={6} otp autoSubmit />
  <button type="reset">Clear</button>
</form>

Propriétés