Input OTP

A one-time code typed into separate boxes.

The snippet an agent gets

import { InputOTP } from '@basiiik/ui';<InputOTP label="Verification code" />

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it ships.

Example values were filled in for the required prop label: replace them with your own.
Empty, Filled and Focused follow the value and focus; Error is the error prop; Disabled is the disabled attribute.
Storybook: Inputs/Input OTP.

Install

npm install @basiiik/uiimport { InputOTP } from '@basiiik/ui';

Props

Prop	Type	Default
`error`	`ReactNode`	`–`
`label`	`ReactNode`	`–`
`aria-label`	`string`	`–`
`aria-labelledby`	`string`	`–`
`length`	`number`	`–`
`value`	`string`	`–`
`defaultValue`	`string`	`–`
`onChange`	`(value: string) => void`	`–`
`onComplete`	`(value: string) => void`	`–`
`allow`	`"digits" \| "alphanumeric"`	`"digits"`
`groupSize`	`number`	`–`
`helperText`	`ReactNode`	`–`
`disabled`	native	`–`

Native attributes such as className, id and data-* go to the root element.

States. Empty, Filled and Focused follow the value and focus; Error is the error prop; Disabled is the disabled attribute.

Accessibility

Tab moves to the code field
Typing fills the boxes in order; Backspace removes the last character
Pasting a whole code fills every box
One labelled input, not one per box, so screen readers hear a single field
autocomplete="one-time-code" lets the browser fill a code from a text message
Helper and error text are linked with aria-describedby; aria-invalid when wrong
The boxes are aria-hidden drawing

Use it when

A verification code sent by email or text message
A short pairing or invite code

Do not use it when

Passwords or PINs people choose (use Text Field with revealable)
Codes longer than about eight characters (use Text Field)

Rules for agents

Give it a visible label ("Verification code") and say where the code was sent in helperText
Match length to the code you send
Submit on onComplete, or with a Verify button for codes people may mistype
On a wrong code, set error with what to do next and keep the typed code

Avoid

One input per box (it breaks paste, autofill and screen readers)
Clearing the code without saying why
Moving focus away automatically before the person sees an error

Colour tokens it reads

color.bg.disabledcolor.bg.surfacecolor.border.dangercolor.border.focuscolor.border.inputcolor.border.subtlecolor.text.dangercolor.text.disabledcolor.text.primarycolor.text.secondarycolor.text.tertiary

5 Figma variantsTry it in the live demo