Skip to content

Input mask

Lab Available in release assets

Guide format entry without rewriting, hiding, or treating a client-formatted value as canonical.

Input mask primary example

Show code
<form action="/contact" method="post">
  <div class="thin-field">
    <label for="phone">Phone number</label>
    <input class="thin-input" id="phone" name="phone" type="tel" inputmode="tel" autocomplete="tel" aria-describedby="phone-hint phone-error" required />
    <small id="phone-hint">Include country code, for example +1 312 555 0123. Formatting is optional.</small>
    <small class="thin-error" id="phone-error">The server validates and normalizes the submitted number.</small>
  </div>
  <button class="thin-button">Continue</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 input-mask 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