Uranus Design System

OtpVerificationForm envolve o primitivo InputOTP em um formulário pronto para uso. Inclui timer de cooldown para reenvio, suporte a auto-submit quando o código é completado e mensagens de erro inline.

'use client';

import { OtpVerificationForm } from '@uranus-workspace/blocks';
import { Card, CardContent } from '@uranus-workspace/design-system';

export default function OtpVerificationFormDefault() {
  return (
    <div className="flex w-full justify-center">
      <Card className="w-full max-w-md border-border/60 shadow-lg">
        <CardContent className="p-6 sm:p-8">
          <OtpVerificationForm
            title="Verificar seu email"
            description="Enviamos um código de 6 dígitos para gustavo@uranus.com.br."
            onSubmit={() => {}}
            onResend={() => {}}
          />
        </CardContent>
      </Card>
    </div>
  );
}

Uso

import { OtpVerificationForm } from '@uranus-workspace/blocks';

<OtpVerificationForm
  length={6}
  autoSubmit
  onSubmit={async ({ code }) => {
    await verifyCode(code);
  }}
  onResend={async () => {
    await resendCode();
  }}
/>

Props

length — número de dígitos (default: 6).
autoSubmit — submete automaticamente quando o usuário completa o código.
onResend — quando passado, exibe link "Reenviar" com cooldown.
resendCooldown — duração do cooldown em segundos (default: 30).

Acessibilidade

O input tem um <label> sr-only ("Código de verificação") para leitores de tela.
autoFocus no primeiro dígito ao montar.
Botão "Reenviar" mostra contagem regressiva e fica desabilitado durante o cooldown.

OtpVerificationForm

Uso

Props

Acessibilidade

On this page