PinField Champ de Code PIN
Introduction
Un contrôle de saisie segmenté et interactif conçu pour la saisie de chaînes alphanumériques courtes à longueur fixe, telles que les codes de vérification, les mots de passe à usage unique (OTP), les jetons de connexion SMS et les valeurs PIN. Il propose un cycle de focus automatique du curseur, la suppression par retour arrière, l'assainissement du collage et des descripteurs d'accessibilité entièrement unifiés.
Le composant PinField est entièrement intégré en tant que bloc pinField dans le Page Builder, permettant aux auteurs et développeurs de configurer facilement les longueurs de code, les formats de vérification et les états de saisie directement dans le CMS.
Usage
Ces exemples illustrent comment les éditeurs de contenu lient et structurent des composants de champ PIN personnalisés.
1. Saisie standard de vérification SMS à 6 chiffres
Une saisie PIN numérique standard configurée avec 6 cases segmentées, optimisée pour les vérifications par e-mail ou SMS.
{
"type": "pinField",
"label": "Verification code",
"helperText": "Enter the 6-digit confirmation code we sent to your address.",
"count": 6,
"otp": true,
"blurOnComplete": true,
"interactive": true
}
2. Saisie de mot de passe masquée et sécurisée (4 chiffres)
Présente un module PIN sécurisé à 4 chiffres. La propriété mask sécurise la frappe en remplaçant les caractères par des puces de sécurité génériques.
{
"type": "pinField",
"label": "Security PIN",
"placeholder": "•",
"count": 4,
"mask": true,
"interactive": true
}
3. Code promo alphanumérique personnalisé (variante flushed)
Rend un sélecteur de code à 5 cases utilisant un format alphanumérique et une variante de bordure flushed distincte.
{
"type": "pinField",
"label": "Promo Coupon Code",
"placeholder": "-",
"count": 5,
"format": "alphanumeric",
"variant": "flushed",
"interactive": true
}
Props
| Propriété | Type de champ CMS | Défaut | Description / options prises en charge |
|---|---|---|---|
Texte du libellé (label) | string | - | En-tête visuel principal placé au-dessus des segments. |
Texte d'aide (helperText) | string | - | Instructions descriptives affichées sous les cases. |
Message d'erreur (errorText) | string | - | Message de validation affiché en cas d'échec de la validation. |
Nombre de cases (count) | number | 4 | Nombre de cases de segment à générer. |
Classe de caractère (format) | select | "numeric" | Restreint les caractères acceptés. • Options : "numeric", "alphanumeric", "alphabetic". |
Masque de caractère (mask) | boolean | false | Masque les valeurs saisies pour les saisies sécurisées. |
Autoremplissage OTP (otp) | boolean | false | Active la détection de code à usage unique sur mobile. |
Auto-envoi (autoSubmit) | boolean | false | Soumet le formulaire englobant dès le dernier segment rempli. |
Variante visuelle (variant) | select | "outline" | Style visuel de chaque case. • Options : "outline", "subtle", "surface", "flushed". |
Échelle de taille (size) | select | "md" | Contrôle la largeur et la hauteur des cases. • Options : "xs", "sm", "md", "lg", "xl". |
Forcer interactif (interactive) | boolean | true | Hydrate les champs pour lier les déclencheurs et l'assainissement du collage. |
Developer Notes & Accessibility
- Îlot d'hydratation : En tant que mise en page avancée capturant les événements de collage, assainissant les entrées et gérant les sauts de curseur entre champs sur les limites de focus mobile, PinField fonctionne comme un îlot conditionnel de Niveau 2 (
"interactive": true). - Conformité WAI-ARIA : La composante enveloppe chaque segment avec des balises de mise en page et de libellé appropriées (
role="group",aria-label). Les utilisateurs peuvent naviguer entre les segments avec les flèches ou la touche de retour. - Intégration de formulaire : Elle intègre un
<input>natif masqué portant la chaîne de code complète. Les règles d'auto-envoi appellentform.requestSubmit()à la fin de la saisie, transmettant l'action au formulaire parent le plus proche.