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.

MobileBetaForms

Mobile only — React Native, from @krizaka/ui/native. Beta: its API may still change in a minor version.

Why it is here. the native apps: Yasakia (PY4), Yororis (PYO2), Orochia mobile (PS6), Orazaka mobile: the code of a sign-in or a phone check.

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

Import

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

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub