Components

Code Input

A one-time code, a box per character, that types, pastes and autofills from a text message like any field.

Sign-in code

We sent it to your phone.

Import

import { CodeInput } from '@rinzai/zen';

API reference

<CodeInput>

A one-time code (sign-in, verification): a box per character. It's one real field under the boxes, so typing, pasting, deleting and the phone's autofill from a text message all work as in any field. onComplete gets the code once every box is filled.

Prop	Type	Default
`allowed` Which characters count (one at a time); digits by default. Others typed or pasted are dropped.	`RegExp`	`/\d/`
`defaultValue`	`string`
`length` How many characters (boxes).	`number`	`6`
`onComplete` Called with the code when the last box is filled.	`((code: string) => void)`	`—`
`onValueChange`	`((value: string) => void)`	`—`
`value`	`string`	`—`