OtpInput
The sign-in code (Figma "OTP Input" 170:184): ONE real `autocomplete="one-time-code"` numeric input (SMS and e-mail autofill, paste, password managers, native forms) drawn as segmented slots.
Typing always appends; Backspace removes the last digit.
<OtpInput aria-label="Código de acesso" value={code} onValueChange={setCode} onValueComplete={verify} status={status} error="Código incorreto. Restam 2 tentativas." />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
OTP Input
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
| Empty | Typing | Success | Error | Disabled | Locked |
|---|---|---|---|---|---|
Enviamos um código de 6 dígitos para mariana@exemplo.com.br. | Enviamos um código de 6 dígitos para mariana@exemplo.com.br. | Código confirmado. | Código incorreto. Restam 2 tentativas. | Você pode pedir um novo código em 0:42. | Código bloqueado depois de 5 tentativas. Peça um novo link. |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
OtpCellProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| digit? | string | — | The digit shown (Figma "Digit"); empty while not typed. |
| status? | "error" | "idle" | "success" | null | "idle" | |
| current? | boolean | null | false | |
| disabled? | boolean | null | false | |
| className? | string | — |
OtpInputProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| length? | number | 6 | Number of digits. |
| value? | string | — | |
| defaultValue? | string | "" | |
| onValueChange? | ((value: string) => void) | — | |
| onValueComplete? | ((value: string) => void) | — | Fires when the last digit arrives (typed, pasted or autofilled). |
| status? | "error" | "idle" | "success" | "idle" | The server's verdict on the code: Success draws a check, Error the red slots and the `error` message. Empty and Typing are interaction. |
| label? | ReactNode | — | Figma "Show label": a visible label above the slots. |
| hint? | ReactNode | — | Help line while idle ("Enviamos um código para…"). |
| error? | ReactNode | — | Error message (shown with status "error", or with `disabled` to say why the code is locked). |
| successMessage? | ReactNode | — | Line shown with status "success". |
| disabled? | boolean | false | Cooldown, or locked after too many tries: say which in `error`/`hint`. |
| name? | string | — | |
| autoFocus? | boolean | — | |
| id? | string | — | |
| className? | string | — |