input verification code (beta)
O InputVerificationCode é um componente de entrada de código de verificação.
demo interativa
Uma versão de interativa do componente desenvolvido.
propriedades*
| property | description | required | default value | type |
|---|---|---|---|---|
value | Value of the input | true | undefined | string |
onChange | Callback to be called when the value changes | true | undefined | (code: string) => void |
id | Id of the input | false | ds-input-verification-code | string |
label | Label for the input | false | undefined | string |
codeLength | Number of inputs to be rendered | false | 6 | number |
shouldAutoFocus | Whether the first input should be auto focused | false | false | boolean |
inputType | The type that will be passed to the input being rendered | false | number | AllowedInputTypes |
ariaLabel | The aria-label that will be passed to the input being rendered | false | Por favor, digite o caractere de verificação na posição | string |
error | Whether the input should have error styles | false | false | boolean |
errorMessage | The error message to be shown when error is true | false | undefined | string |
required | Set if input is required | false | true | boolean |
disabled | Set if input is disabled | false | false | boolean |
helperText | Set the text bellow the input | false | undefined | string |
*valores gerados automaticamente.
propriedades para estilização (styled props)
Recomendamos que o componente siga as propriedades padrões, mencionadas na sessão acima. Porém, ele também possui as seguintes propriedades do @olist/styled-system para atender cenários não mapeados:
uso
Normalmente, o InputVerificationCode é utilizado para que o usuário insira um código de verificação recebido por telefone, email ou outro canal.
- Se o tipo de entrada for numérico, não irá aceitar entradas de texto.
- Se o tipo de entrada for texto, irá aceitar entradas de texto e numérico.
- O usuário pode colar o código de verificação.
- Ao colar, será verificado o tipo de entrada e o tamanho do código de
verificação.
- Se o tamanho for maior que o esperado, será cortado para o tamanho esperado.
- Se o tamanho for menor que o esperado, será preenchido com o valor colado.
- Se o tipo de entrada for numérico e o valor colado for texto, será ignorado.
guia de conteúdo
- Input label: deve ser um texto curto e direto sobre o dado que se espera preencher. Exemplo: código de confirmação do email, código de confirmação do telefone.
- Helper text: deve ser uma frase curta, utilizando pontuação normal, ajudando o usuário a entender a informação esperada. Exemplo: “Nome igual ao escrito no cartão.”.
- Error message: deve ser uma frase curta, utilizando pontuação normal, ajudando o usuário a entender o erro e como corrigi-lo. Exemplo: “Código inválido.”.
- Aria label: deve ser um texto curto e direto que oriente o usuário sobre como atuar no campo. Exemplo: "Digite o caractere de verificação na posição 1”. obs.: a contagem é adicionada automaticamente no final da mensagem.
guia de design
- Tem guia de uso.
- Tem guia de conteúdo.
- Usa os design tokens.
- Tem símbolo no Figma.
- Possui motion.
- Possui versão web.
- Possui versão responsiva.
- Possui versão mobile.
- É acessível via leitor de tela.
- Texto possui contraste acessível (WCAG 2.0 - Nível AA).