Campo de código OTP

Um campo de código único: seis caixas, um dígito cada. Parecem seis entradas e comporta-se como um valor - digitando avanços, Backspace passos para trás, setas mover sem edição, e um código colado ou auto- preenchido espalha-se através das caixas.

Instalação

Você pode adicionar esta entrada OTP usando o nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

CLI

Manual

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add input-otp

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Valor controlado

O valor é uma única string, não uma matriz de caracteres. Pass valor + emMudança para a controlar, ou valor por omissão para deixá-lo descontrolado. onComplete dispara o momento em que a última caixa preenche, que é geralmente onde você se submete.

const [code, setCode] = useState("");
<InputOtp  value={code}  onChange={setCode}  onComplete={(value) => verify(value)}  aria-label="Verification code"/>

Comprimento, agrupamento e estados

length define o número de caixas e groupEvery divide-os em corridas, o que torna um código longo mais fácil de ler de volta. isInvalid dá às caixas uma borda vermelha sobre o mesmo tom uma falha Campo de texto usa.

{/* Four boxes instead of six */}<InputOtp length={4} aria-label="PIN" />
{/* Split into groups: 000 000 */}<InputOtp groupEvery={3} aria-label="Verification code" />
{/* States */}<InputOtp isInvalid aria-label="Verification code" /><InputOtp isDisabled defaultValue="1234" aria-label="Verification code" />

Colar e preencher automaticamente

Colando em qualquer caixa distribui os dígitos a partir desse ponto em vez de deixar cair tudo, exceto o primeiro caractere. O mesmo caminho lida com o preenchimento automático do sistema operacional: iOS e Chrome entregam todo o código em uma única caixa, então cada caixa carrega autoComplete="one-time-code" e aceita mais de um caractere. Os não-dígitos são despojados por todo o lado, e as caixas usam inputMode="numeric" assim, os telefones mostram um bloco de números sem os spinners e personagens perdidos a number A entrada traria.