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 uniquement — React Native, depuis @krizaka/ui/native. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Verifying a phone number or an email at sign-up.
- Confirming a payout with a code.
Quand ne pas l’utiliser
- For a password.À la place : Field
Installation
Installer
npx expo install react-native-svg
npm install @krizaka/uiImporter
import { OtpInput } from "@krizaka/ui/native";Enveloppez l’application une fois dans ThemeProvider de @krizaka/ui/native : chaque composant lit ses rôles de couleur.
Exemples
React Native n’a pas d’aperçu en direct sur le web : chaque exemple montre la capture de sa story, testée dans les deux thèmes, et le code à copier.
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 | Défaut | Description |
|---|---|---|---|
labelrequis | 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). |
Accessibilité
- One text input named by
label: screen readers read the code as one value. invalidturns the boxes to danger and plays an error tick.
Bonnes pratiques
- Check the code in
onComplete; disable it while checking. - Say what went wrong under it and send a new code.
Composants liés
Générée depuis le code de @krizaka/ui 3.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur 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.