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.

MobileBêtaFormulaires

Mobile uniquement — React Native, depuis @krizaka/ui/native. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. the native apps: Yasakia (PY4), Yororis (PYO2), Orochia mobile (PS6), Orazaka mobile: the code of a sign-in or a phone check.

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/ui

Importer

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
`label`requis	`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.
invalid turns 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.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub