OTP input
A one-time code in boxes over one real input: the keyboard's suggestion of the code and pasting fill every box at once.
Mobile only — React Native, from @krizaka/ui/native. Beta: its API may still change in a minor version.
When to use
- Verifying a phone number or an email at sign-up.
- Confirming a payout with a code.
When not to use
- For a password.Use instead: Field
Installation
Install
npx expo install react-native-svg
npm install @krizaka/uiImport
import { OtpInput } from "@krizaka/ui/native";Wrap the app once in ThemeProvider from @krizaka/ui/native: every component reads its colour roles.
Examples
React Native has no live preview on the web: each example shows the screenshot of its story, tested in both themes, and the code to copy.
Verify
Six digits from a text message.
Refused
An expired code, its words under the boxes.
Props
A one-time code in boxes — one real input underneath, so the keyboard's suggestion of the code from a message
(iOS oneTimeCode, Android sms-otp) and pasting fill every box at once; the caret shows in the next empty box.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | The accessible name (“Verification code”) — passed translated. |
autoFocus | boolean | — | Focus it when shown. |
disabled | boolean | — | Cannot be typed in (checking). |
invalid | boolean | — | The code was refused: the boxes turn to danger, and an error tick. |
length | number | 6 | How many characters. Default 6. |
mode | "text" | "numeric" | numeric | numeric (default) or text (letters and digits). |
onComplete | ((code: string) => void) | — | Called once all the characters are there (check it here); a tick confirms. |
onValueChange | ((code: string) => void) | — | Called on every change with the code typed so far. |
style | StyleProp<ViewStyle> | — | Styles merged last. |
value | string | — | The code (controlled). |
Accessibility
- One text input named by
label: screen readers read the code as one value. invalidturns the boxes to danger and plays an error tick.
Best practices
- Check the code in
onComplete; disable it while checking. - Say what went wrong under it and send a new code.
Related components
Generated from the code of @krizaka/ui 3.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Form
A form = a schema (zod 4) + the package's fields, on TanStack Form v1: each error shows once the field is left and goes as soon as it is fixed, in the person's language (i18n keys, never the engine's English), a value can be checked on the server as it is typed, and the server's refusals land under their fields — web and React Native, the same schema.
Radio group
One choice among a few options, all visible: dots with their words, whole cards, tactile keys that press in, or a segmented control.