Negocios

Input OTP

Componente para entrada de códigos de verificação de comprimento fixo (OTP, PIN, códigos de confirmação).

Visão geral

O InputOTP divide a entrada em slots individuais, guiando o usuário durante a digitação do código.

OTP de 6 dígitos

Import

import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@/components/ui/input-otp"

Variações

O InputOTP suporta diferentes comprimentos e padrões de agrupamento.

PIN de 4 dígitos

Código de 8 caracteres (4+4)

Padrão de implementação

Como usar o InputOTP em fluxos de verificação.

OTP controlado

"use client"
import { useState } from "react"
import {
  InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator
} from "@/components/ui/input-otp"

export function VerificacaoOTP() {
  const [value, setValue] = useState("")

  return (
    <div className="flex flex-col gap-4">
      <InputOTP maxLength={6} value={value} onChange={setValue}>
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot index={3} />
          <InputOTPSlot index={4} />
          <InputOTPSlot index={5} />
        </InputOTPGroup>
      </InputOTP>
      <p className="text-sm text-muted-foreground">
        Código digitado: {value || "—"}
      </p>
    </div>
  )
}

Com validação ao completar

<InputOTP
  maxLength={6}
  value={value}
  onChange={(val) => {
    setValue(val)
    if (val.length === 6) {
      verificarCodigo(val)
    }
  }}
>
  ...
</InputOTP>

Somente números (pattern)

import { REGEXP_ONLY_DIGITS } from "input-otp"

<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
  ...
</InputOTP>

Props e uso

API dos sub-componentes do InputOTP.

Props principais

maxLength

number

Número total de caracteres do código. Obrigatório.

value

string

Valor controlado do código digitado.

onChange

(value: string) => void

Callback chamado ao digitar.

pattern

string | RegExp

Validação do tipo de caractere aceito (ex: REGEXP_ONLY_DIGITS).

disabled

boolean

Desabilita o campo.

InputOTPSlot index

number

Posição do slot (0-indexed). Obrigatório.

Acessibilidade

O InputOTP usa aria-label e gerencia foco automaticamente entre slots.

Paste de código completo (⌘V / Ctrl+V) funciona diretamente no primeiro slot.

Sempre informe ao usuário onde o código foi enviado e quanto tempo é válido.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter