Formulário

OTPField

/componentes/otp-field.mdmarkdown cru, para quem lê com agent em vez de olho

Preenchido

Código de verificação

Vazio

Código de verificação

Enviamos por SMS. Colar o código inteiro funciona.

Importar

import { OTPField } from '@rivocode/ui'

Quando usar

Código de verificacao, uma casa por digito.

Colar o código inteiro funciona: a Base UI espalha os digitos pelas casas em vez de jogar tudo na primeira. E quase sempre assim que o código chega, vindo do SMS ou do e-mail.

O teclado de números e o preenchimento pelo SMS já vem prontos, num input escondido que guarda o código inteiro. As casas visíveis só mostram.

<OTPField length={6} onValueChange={(codigo) => conferir(codigo)} />

No React Native

Traduz: o @rivocode/ui-native exporta OTPField - caixas visíveis, um campo escondido: teclado, autofill de SMS e leitor veem um só; o dígito aparece crescendo. A API não é a mesma do web (no nativo tudo é controlado), e a tabela de paridade diz o que muda peça a peça.

API

Prop	Tipo
`length`obrigatória0.4.0 The number of OTP input slots.	`number`
`autoComplete`0.4.0 The input autocomplete attribute.	`string`
`autoSubmit`0.4.0 Whether to submit the owning form when the OTP becomes complete.	`boolean`
`defaultValue`0.4.0 The uncontrolled OTP value when the component is initially rendered.	`string`
`disabled`0.4.0 Whether the component should ignore user interaction.	`boolean`
`form`0.4.0 A string specifying the `form` element with which the hidden input is associated.	`string`
`inputMode`0.4.0 The virtual keyboard hint applied to the slot inputs and hidden validation input.	`"decimal""email""none""numeric""search""tel""text""url"`
`mask`0.4.0 Whether the slot inputs should mask entered characters.	`boolean`
`name`0.4.0 Identifies the field when a form is submitted.	`string`
`normalizeValue`0.4.0 Function that normalizes the OTP value after whitespace and `validationType` filtering.	`((value: string) => string)`
`onValueChange`0.4.0 Callback fired when the OTP value changes.	`((value: string, eventDetails: OTPFieldRootChangeEventDetails) => void)`
`onValueComplete`0.4.0 Callback function that is fired when the OTP value becomes complete, or when a complete value is pasted while the OTP is already complete.	`((value: string, eventDetails: OTPFieldRootCompleteEventDetails) => void)`
`onValueInvalid`0.4.0 Callback fired when entered text contains characters that are rejected by validation or normalization before the OTP value updates.	`((value: string, eventDetails: OTPFieldRootInvalidEventDetails) => void)`
`readOnly`0.4.0 Whether the user should be unable to change the field value.	`boolean`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, OTPFieldRootState>ReactElement<unknown, stringJSXElementConstructor<any>>`
`required`0.4.0 Whether the user must enter a value before submitting a form.	`boolean`
`validationType`0.4.0 The type of input validation to apply to the OTP value.	`OTPValidationType`
`value`0.4.0 The OTP value.	`string`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.