Input OTP

Updated October 28, 2026

InputOTP draws a one-time code as pixel cells. Underneath is one real input, so SMS autofill, paste and the numeric keypad all work; pasting "123-456" keeps the digits. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

Verification code

Sent to your phone

Licence key

Key not found

Locked

import "@/components/dithercharts/controls.css"
import { InputOTP } from "@/components/dithercharts/input-otp"

<InputOTP
  label="Verification code"
  groups={[3, 3]}
  onComplete={(code) => verify(code)}
/>
<InputOTP label="Licence key" length={4} pattern="alphanumeric" />

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add input-otp

Props

It renders a native element, so every other attribute that element takes passes through.

InputOTP props
Prop	Type	Default	Description
labelrequired	Type ReactNode	Default –	The caption above the cells, and the input's accessible name.
length	Type number	Default `6`	How many characters.
groups	Type readonly number[]	Default one run	Splits the cells into runs with a pixel dash between, e.g. [3, 3].
value	Type string	Default –	The code, for a controlled input; pair it with `onValueChange`.
defaultValue	Type string	Default –	The code at first, for an uncontrolled input.
onValueChange	Type (value: string) => void	Default –
onComplete	Type (value: string) => void	Default –	Called once the last cell is filled.
pattern	Type "digits" \| "alphanumeric"	Default –	"digits" (the default, with a numeric keypad) or "alphanumeric" (letters are uppercased).
name	Type string	Default –	The form field name.
disabled	Type boolean	Default `false`
className	Type string	Default –
hint	Type ReactNode	Default –	Help text under the field, read after its label.
error	Type ReactNode	Default –	An error under the field; it also marks the field invalid.