PinField Campo de Código
Introduction
Un control de entrada segmentado e interactivo diseñado para introducir cadenas alfanuméricas cortas de longitud fija, como códigos de verificación, contraseñas de un solo uso (OTP), tokens de inicio de sesión por SMS y valores PIN. Cuenta con ciclo automático de enfoque del cursor, borrado con retroceso, saneamiento de pegado y descriptores de accesibilidad totalmente unificados.
El componente PinField está totalmente integrado como bloque pinField en el Page Builder, lo que permite a autores y desarrolladores configurar fácilmente longitudes de código, formatos de verificación y estados de entrada directamente en el CMS.
Usage
Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran componentes de campo PIN personalizados.
1. Entrada estándar de verificación SMS de 6 dígitos
Una entrada PIN numérica estándar configurada con 6 cajas segmentadas, optimizada para verificaciones por correo o 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. Entrada de contraseña oculta y segura (4 dígitos)
Muestra un módulo PIN seguro de 4 dígitos. La propiedad mask protege la escritura reemplazando los caracteres con glifos de punto de seguridad genéricos.
{
"type": "pinField",
"label": "Security PIN",
"placeholder": "•",
"count": 4,
"mask": true,
"interactive": true
}
3. Código promocional alfanumérico personalizado (variante flushed)
Renderiza un selector de código de 5 cajas usando formato alfanumérico y una variante de borde flushed distinta.
{
"type": "pinField",
"label": "Promo Coupon Code",
"placeholder": "-",
"count": 5,
"format": "alphanumeric",
"variant": "flushed",
"interactive": true
}
Props
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / opciones admitidas |
|---|---|---|---|
Texto de etiqueta (label) | string | - | Encabezado visual principal situado sobre los segmentos de entrada. |
Texto de ayuda (helperText) | string | - | Instrucciones descriptivas mostradas bajo las cajas de entrada. |
Mensaje de error (errorText) | string | - | Mensaje de validación mostrado cuando las entradas fallan la validación. |
Cantidad de cajas (count) | number | 4 | Número de cajas de segmento de entrada a generar. |
Clase de carácter (format) | select | "numeric" | Restringe los caracteres aceptados. • Opciones: "numeric", "alphanumeric", "alphabetic". |
Máscara de carácter (mask) | boolean | false | Al activarse, oculta los valores escritos para entradas seguras. |
Autorrelleno OTP (otp) | boolean | false | Habilita la detección de autocompletado de códigos en móviles. |
Envío automático (autoSubmit) | boolean | false | Envía el formulario envolvente al completar el último segmento. |
Variante visual (variant) | select | "outline" | Estilo visual de cada caja. • Opciones: "outline", "subtle", "surface", "flushed". |
Escala de tamaño (size) | select | "md" | Controla el ancho y alto de las cajas. • Opciones: "xs", "sm", "md", "lg", "xl". |
Forzar interactivo (interactive) | boolean | true | Hidrata los campos para enlazar disparadores y saneamiento de pegado. |
Developer Notes & Accessibility
- Isla de hidratación: Como diseño avanzado que captura eventos de pegado, sanea entradas y gestiona saltos de cursor entre entradas en límites de enfoque móvil, PinField opera como una isla condicional de Nivel 2 (
"interactive": true). - Cumplimiento WAI-ARIA: La componente envuelve cada segmento con etiquetas de diseño y accesibilidad adecuadas (
role="group",aria-label). Los usuarios pueden recorrer los segmentos con las flechas o la tecla de retroceso. - Integración de formularios: Incluye un
<input>nativo oculto que lleva la cadena de código completa. Las reglas de autoenvío llaman aform.requestSubmit()al completar la entrada, enviándola al formulario padre más cercano.