OTPInput
Campo de senha única com caixas individuais por dígito, avanço automático e suporte a colar.
Demonstração
Invalid code. Please try again.
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
length | number | 6 | Número de caixas de dígitos. |
value | string | — | Valor controlado como string. |
onChange | (value: string) => void | — | Callback recebendo a string completa de dígitos. |
disabled | boolean | false | Desabilita todos os campos. |
error | string | — | Mensagem de erro exibida abaixo dos campos. |
autoFocus | boolean | false | Auto-foca a primeira caixa ao montar. |
Uso
import { OTPInput } from '@ghiberti85/ui'
// 6-digit default
<OTPInput onChange={(val) => console.log(val)} />
// 4-digit PIN
<OTPInput length={4} />
// With error
<OTPInput error="Invalid verification code" />
// Controlled
const [code, setCode] = useState('')
<OTPInput value={code} onChange={setCode} />