PinField Campo de Código
Introduction
Um controle de entrada segmentado e interativo projetado para inserir cadeias alfanuméricas curtas de comprimento fixo, como códigos de verificação, senhas de uso único (OTP), tokens de login por SMS e valores PIN. Ele apresenta ciclo automático de foco do cursor, exclusão por backspace, higienização de colagem e descritores de acessibilidade totalmente unificados.
O componente PinField está totalmente integrado como bloco pinField no Page Builder, permitindo que autores e desenvolvedores configurem facilmente comprimentos de código, formatos de verificação e estados de entrada diretamente no CMS.
Usage
Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam componentes de campo PIN personalizados.
1. Entrada padrão de verificação SMS de 6 dígitos
Uma entrada PIN numérica padrão configurada com 6 caixas segmentadas, otimizada para verificações por 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. Entrada de senha oculta e segura (4 dígitos)
Demonstra um módulo PIN seguro de 4 dígitos. A propriedade mask protege a digitação substituindo os caracteres por glifos de ponto de segurança genéricos.
{
"type": "pinField",
"label": "Security PIN",
"placeholder": "•",
"count": 4,
"mask": true,
"interactive": true
}
3. Código promocional alfanumérico personalizado (variante flushed)
Renderiza um seletor de código de 5 caixas usando formato alfanumérico e uma variante de borda flushed distinta.
{
"type": "pinField",
"label": "Promo Coupon Code",
"placeholder": "-",
"count": 5,
"format": "alphanumeric",
"variant": "flushed",
"interactive": true
}
Props
| Propriedade | Tipo de campo CMS | Padrão | Descrição / opções suportadas |
|---|---|---|---|
Texto do rótulo (label) | string | - | Cabeçalho visual principal acima dos segmentos. |
Texto de ajuda (helperText) | string | - | Instruções descritivas exibidas abaixo das caixas. |
Mensagem de erro (errorText) | string | - | Mensagem de validação exibida quando as entradas falham. |
Quantidade de caixas (count) | number | 4 | Número de caixas de segmento a gerar. |
Classe de caractere (format) | select | "numeric" | Restringe os caracteres aceitos. • Opções: "numeric", "alphanumeric", "alphabetic". |
Máscara de caractere (mask) | boolean | false | Oculta os valores digitados para entradas seguras. |
Preenchimento automático OTP (otp) | boolean | false | Ativa a detecção de código único em dispositivos móveis. |
Autoenvio (autoSubmit) | boolean | false | Envia o formulário envolvente ao preencher o último segmento. |
Variante visual (variant) | select | "outline" | Estilo visual de cada caixa. • Opções: "outline", "subtle", "surface", "flushed". |
Escala de tamanho (size) | select | "md" | Controla a largura e altura das caixas. • Opções: "xs", "sm", "md", "lg", "xl". |
Forçar interativo (interactive) | boolean | true | Hidrata os campos para vincular gatilhos e higienização de colagem. |
Developer Notes & Accessibility
- Ilha de hidratação: Como um layout avançado que captura eventos de colagem, higieniza entradas e trata saltos de cursor entre campos em limites de foco móvel, o PinField opera como uma ilha condicional de Nível 2 (
"interactive": true). - Conformidade WAI-ARIA: O componente encapsula cada segmento com tags de layout e rótulo apropriadas (
role="group",aria-label). Os usuários podem percorrer os segmentos com as setas ou a tecla de retrocesso. - Integração de formulário: Inclui um
<input>nativo oculto que carrega a cadeia de código completa. As regras de autoenvio chamamform.requestSubmit()ao concluir a entrada, enviando a ação ao formulário pai mais próximo.