# OTPField

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.

```tsx
<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](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { OTPField } from '@rivocode/ui'
```

## Exemplos

### Preenchido

```tsx
import { Field, FieldDescription, FieldLabel, OTPField } from '@rivocode/ui'

export function Filled() {
  return (
    <Field className="w-fit">
      <FieldLabel>Código de verificação</FieldLabel>
      <OTPField length={6} defaultValue="481337" />
    </Field>
  )
}
```

### Vazio

```tsx
import { Field, FieldDescription, FieldLabel, OTPField } from '@rivocode/ui'

export function Empty() {
  return (
    <Field className="w-fit">
      <FieldLabel>Código de verificação</FieldLabel>
      <OTPField length={6} />
      <FieldDescription>Enviamos por SMS. Colar o código inteiro funciona.</FieldDescription>
    </Field>
  )
}
```

## Props

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

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Autocomplete](/componentes/autocomplete.md)
- [Calendar](/componentes/calendar.md)
- [Checkbox](/componentes/checkbox.md)
- [CheckboxGroup](/componentes/checkbox-group.md)
- [ColorPicker](/componentes/color-picker.md)
- [Combobox](/componentes/combobox.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)