Forms

OtpInput

One-time codes, one cell per character.

import { OtpInput } from "@flinbu/seed";

In a Field, grouped 3 + 3

Verification code

We sent 6 digits to felipe@example.com.

Try 246810.

import { Field, OtpInput } from "@flinbu/seed";

const [code, setCode] = React.useState("");

<div className="flex flex-col gap-base">
  <Field label="Verification code" hint="We sent 6 digits to felipe@example.com." error={code.length === 6 && code !== "246810" ? "That code didn’t match. Check the latest email." : undefined}>
    <OtpInput value={code} onChange={setCode} groupSize={3} />
  </Field>
  <span className="text-tertiary body-body-4-regular">Try 246810.</span>
</div>

Use it for

Email and SMS verification, two-factor codes.

Props

Prop	Type	Default	Description
`length`	`number`	`6`	Number of cells.
`value / defaultValue`	`string`	–	The code.
`onChange`	`(value: string) => void`	–	On every change.
`onComplete`	`(value: string) => void`	–	Once every cell is filled.
`alphanumeric`	`boolean`	–	Letters too; default digits only.
`groupSize`	`number`	–	A gap after this many cells.
`invalid / disabled / autoFocus`	`boolean`	–	States.

Accessibility

A labelled group of cells; each says Character 2 of 6.
autocomplete=one-time-code lets phones offer the code; paste fills every cell.