One-time code — Teasim

A row of native one-character code inputs. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

otp, otp-slot, otp-separator

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

html

<fieldset>
  <legend>Verification code</legend>
  <div class="otp">
    <input class="otp-slot" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="1" aria-label="Digit 1">
    <input class="otp-slot" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 2">
    <span class="otp-separator" aria-hidden="true">–</span>
    <input class="otp-slot" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 3">
  </div>
</fieldset>

Variants and composition

otp-slot contains each native input; otp-separator is decorative. Joined cells and spacing are consumer utilities.

Behavior and accessibility

Use labelled native inputs with suitable autocomplete and inputmode. Focus movement, paste distribution, validation, and code submission remain application behavior.

Reference

See the interactive Storybook specimen. Continue to Pagination or return to the Official preset overview.