Components

OTP input

A one-time-code field: a drop of light stretches to the next cell as you type, characters fall into place and a full code sends an iridescent wave across.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

React

import { OTPInput } from '@vizzele/react';

const [code, setCode] = useState('');
const [wrong, setWrong] = useState(false);

<OTPInput
  value={code}
  onValueChange={(v) => {
    setCode(v);
    setWrong(false);
  }}
  onComplete={async (v) => setWrong(!(await verify(v)))}
  invalid={wrong}
  groupSize={3}
  autoFocus
/>

Props

Prop	Type	Default	Description
`length`	`number`	`6`	Number of cells.
`value / defaultValue / onValueChange`	`string`	—	Controlled or uncontrolled.
`onComplete`	`(code: string) => void`	—	Fires once, when the last cell is filled.
`type`	`'numeric' \| 'alphanumeric'`	`'numeric'`	Allowed characters; letters are uppercased.
`groupSize`	`number`	—	Draw a gap every n cells.
`mask`	`boolean`	—	Show dots instead of characters.
`invalid`	`boolean`	—	Shake once and turn red.
`label`	`string`	`'One-time code'`	Accessible name.
`name`	`string`	—	Submitted with forms.

Usage

Props

Accessibility