Verification code

One-time code input. Auto-advances, accepts paste of the full code and stays LTR in every locale.

Preview

React · live from the Storybook

HTML and CSS

The same component as plain HTML with pixels-ui.css, no framework needed.

Enter the 6-digit code

HTML

<div class="px-field">
  <span class="px-label" id="otp-l">Enter the 6-digit code</span>
  <div class="px-otp" role="group" aria-labelledby="otp-l">
    <input inputmode="numeric" autocomplete="one-time-code" maxlength="1" placeholder="0" aria-label="Digit 1">
    <input inputmode="numeric" maxlength="1" placeholder="0" aria-label="Digit 2">
    <input inputmode="numeric" maxlength="1" placeholder="0" aria-label="Digit 3">
    <span class="px-otp__sep" aria-hidden="true">-</span>
    <input inputmode="numeric" maxlength="1" placeholder="0" aria-label="Digit 4">
    <input inputmode="numeric" maxlength="1" placeholder="0" aria-label="Digit 5">
    <input inputmode="numeric" maxlength="1" placeholder="0" aria-label="Digit 6">
  </div>
</div>

Usage

Use autocomplete="one-time-code" on the first cell.
Let people paste the whole code.

Installation

Included in the core files. No extra install.

HTML

<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>

Examples

Four digits, large, error

HTML

<div class="px-otp px-otp--lg px-otp--error" role="group" aria-label="Code">
  <input maxlength="1" value="1" aria-label="Digit 1"><input maxlength="1" value="9" aria-label="Digit 2"><input maxlength="1" value="4" aria-label="Digit 3"><input maxlength="1" value="2" aria-label="Digit 4">
</div>

API reference

Class / attribute	Type	Description
`px-otp`	class	Group of single-digit inputs.
`px-otp--lg`	class	Large cells (64px).
`px-otp--error`	class	Error state.

Figma properties

Verification code6 variants · page “Input Fields”Open

One-time code input built from Verification code / Cell. Use autocomplete="one-time-code" and accept paste of the full code.

Property	Type	Values
Digits	Variant	4 6
State	Variant	Empty Filled Error

Verification code / Cell10 variants · page “Input Fields”Open

One digit of a one-time code. Digits stay LTR in every locale.

Property	Type	Values
Digit	Text	“0”
Size	Variant	Medium Large
State	Variant	Active Focused Filled Error Disabled

Design tokens

Component tokens from the Figma Component collection. Override them to restyle just this component.

Token	Alias	Light value
`--px-code-input-size-md`	spacing-48	48px
`--px-code-input-size-lg`	64px	64px
`--px-code-input-radius`	radius-12	12px

Accessibility

Each cell has aria-label “Digit n”.
Group with role="group" and a label.