Skip to content

OTP input

Lab Available in release assets

Collect a one-time code through one pasteable native field without manufacturing segmented input truth.

OTP input primary example

Show code
<form action="/verify" method="post">
  <div class="thin-field">
    <label for="otp">Verification code</label>
    <input class="thin-input" id="otp" name="code" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" minlength="6" maxlength="6" aria-describedby="otp-hint" required />
    <small id="otp-hint">Enter the 6-digit code. You can paste the complete code.</small>
  </div>
  <button class="thin-button">Verify code</button>
</form>

Anatomy

  • Visible label
  • Single native input
  • Persistent format guidance
  • Server validation
  • Submit action

Variants and sizes

  • Default
  • Paste
  • Autofill
  • Long localized guidance

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Empty
  • Complete
  • Incomplete
  • Invalid server response
  • Autofill
  • Paste
  • No JavaScript
  • 400 percent zoom

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Native typing, paste, autofill, validation, and submission remain canonical. Lab experiments may improve presentation but must preserve one editable value and server validation.

Accessibility

Avoid segmented focus traps and keystroke rewriting. Keep labels and instructions visible, allow paste and password-manager autofill, preserve selection, and associate server errors with the field.

Contract
NATIVE
Basis
Native text/tel input with input method hints; no segmented-widget APG claim
Evidence
  • tests/unit/library/otp-mask.test.ts

API

Use semantic form controls with the otp-input guidance contract; never store or validate authentication truth in client state.

Behavior tier: dependency-free

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The labelled native input validates and submits one server-readable value without JavaScript.

Assets and dependencies

  • /foundation.css
  • /labs.css

Dependencies: None

Source: packages/ui/src/items/otp-mask/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes