Ravox KitForms
Input OTP
Slots for an SMS or email code, built on a single input: pasting the whole code fills every slot, the phone suggests the received code, and screen readers hear one field. Numbers or letters, separator, masked and error state; accepts React Hook Form's register().
Mandamos por e-mail. Vale por 10 minutos.
Settings
Toggles
Examples
Submits automatically when complete
Teste com 482913.
Alphanumeric with React Hook Form
Masked PIN in a plain form
Installation
The command creates components/ui/input-otp.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add input-otpProps
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | Number of slots. Ignored when groups is set. |
| groups | number[] | — | Splits the slots with a separator: [3, 3] becomes 000–000. |
| type | "numeric" | "alphanumeric" | "numeric" | numeric opens the numeric keyboard; alphanumeric accepts letters and converts them to uppercase. Anything else is discarded (pasting "482-913" works). |
| value / defaultValue | string | — | Current code (controlled) or initial code. |
| onValueChange | (codigo: string) => void | — | Called on every keystroke, with the value already cleaned. |
| onComplete | (codigo: string) => void | — | Called when the last slot is filled: good for submitting automatically. |
| mask | boolean | false | Dots instead of characters (PIN). |
| label / hint / error | ReactNode | — | Same as Input: wired to the input; error colors the slots and sets aria-invalid. |
| size | "md" | "lg" | "md" | Size of the slots. |
| wrapperClassName | string | — | Classes for the outer block; className goes on the row of slots. |
| ...props | ComponentProps<"input"> | — | name, required, ref, onChange and onBlur go to the real input: {...register("code")} works. |