OTP field

One-time password slots for verification codes. Prefer for SMS and email codes, not general text entry.

Examples

Verification code

Masked

Secure code

Overview

OTP field renders one input per character. Set length on the root, label the first slot with a matching id, and add aria-label on the remaining slots.

tsx

import { OTPField, OTPFieldInput, OTPFieldSeparator } from "@standard-ui/react"

<label htmlFor="verification-code">Verification code</label>
<OTPField id="verification-code" length={6}>
  <OTPFieldInput />
  <OTPFieldInput aria-label="Character 2 of 6" />
  <OTPFieldInput aria-label="Character 3 of 6" />
  <OTPFieldSeparator />
  <OTPFieldInput aria-label="Character 4 of 6" />
  <OTPFieldInput aria-label="Character 5 of 6" />
  <OTPFieldInput aria-label="Character 6 of 6" />
</OTPField>

Usage

Grouping

Use OTPFieldSeparator to chunk codes such as 123-456 without changing the underlying value.

tsx

<OTPField length={6}>
  <OTPFieldInput />
  <OTPFieldInput />
  <OTPFieldInput />
  <OTPFieldSeparator />
  <OTPFieldInput />
  <OTPFieldInput />
  <OTPFieldInput />
</OTPField>

Anatomy

tsx

OTPField
  OTPFieldInput
  OTPFieldSeparator

API

Prop / part	Type	Default	Description
length	number	—	Required slot count.
validationType	string	numeric	Filters accepted characters.
mask	boolean	false	Masks entered characters.
autoSubmit	boolean	false	Submits the owning form when complete.
OTPFieldInput	—	—	One character slot.
OTPFieldSeparator	—	—	Visual divider between slot groups.

Guidelines

Do

Label the first slot and name the remaining ones
Match length to the code your product sends
Keep paste and autofill enabled for one-time codes

Don't

Don't use OTP field for passwords or long secrets
Don't omit length — the root needs it
Don't leave secondary slots without aria-labels