Input OTP

InputOTP is a multi-slot input for one-time passwords, verification codes, PINs, and short access codes. Each slot uses the same surface, border, focus, radius, typography, and state tokens as Input, while the component adds code-specific keyboard and paste behavior.

Basic usageCopy Anchor Link

import { InputOTP } from '@mosmox/ui';

<InputOTP label="Verification code" />

The default length is six characters. Typing advances to the next slot, Backspace moves back when the current slot is empty, arrow keys move between slots, and pasting a code fills consecutive slots from the focused position.

Each slot is a native text input with maxLength={1}. The component renders one hidden form input for the complete value when name is provided; the individual slots are not submitted as separate fields.

Controlled and uncontrolled valuesCopy Anchor Link

Use defaultValue for an internally managed code:

<InputOTP label="Email code" defaultValue="184209" />

Use value and onChange when the parent owns the code:

const [code, setCode] = useState('');

<InputOTP
  label="Authenticator code"
  value={code}
  onChange={setCode}
  onComplete={(completedCode) => verifyCode(completedCode)}
/>

onComplete fires when the value reaches the configured length. It is useful for starting verification, but the component does not submit forms or make network requests by itself.

When the code is shorter than length, missing slots are represented as empty strings. A controlled value is rendered as provided, while an uncontrolled field starts from defaultValue and updates internally after typing, deletion, or paste.

Length, separators, and sizesCopy Anchor Link

Use length for codes from one to twelve characters. Pass separator to visually divide the code into two groups. The separator is inserted at the midpoint:

<InputOTP length={4} label="Short PIN" />
<InputOTP length={6} separator="—" label="Grouped code" />
<InputOTP length={8} separator="·" size="sm" label="Recovery code" />

size supports default, sm, and xs, matching the other input components. variant supports outline and filled.

The separator is decorative and is placed after Math.ceil(length / 2) slots. It does not participate in keyboard navigation or form submission.

Numeric and alphanumeric codesCopy Anchor Link

The default inputMode is numeric, which requests a numeric keyboard on touch devices. Use inputMode="text" and pattern for alphanumeric codes. validateChar can provide custom per-character validation:

<InputOTP length={8} inputMode="text" pattern="[A-Za-z0-9]" label="Alphanumeric code" />

<InputOTP
  length={6}
  inputMode="text"
  validateChar={(character) => !/[018OIL]/.test(character)}
  label="Human-friendly code"
/>

Invalid characters are ignored during typing and paste. The component preserves the order of accepted characters.

pattern is evaluated against each individual character, not the complete code. validateChar runs as an additional validator. In numeric mode, only decimal digits are accepted before the other validators are applied. During paste, accepted characters are inserted from the focused slot and truncated at the configured length.

Masking and autofillCopy Anchor Link

Pass mask to hide entered characters while retaining native input behavior. autoFocus focuses the first slot when the component mounts, and selectOnFocus controls whether an existing character is selected when its slot receives focus:

<InputOTP length={6} mask="•" autoFocus label="Security code" />
<InputOTP length={6} selectOnFocus={false} label="Editable code" />

mask changes each filled slot to a password input and displays the supplied mask string. The empty slots still display their placeholder, if one is provided.

Keyboard and paste behaviorCopy Anchor Link

• Typing a valid character replaces the focused slot and moves focus to the next slot.
• Backspace clears the focused slot; when it is empty, it clears and focuses the previous slot.
• ArrowLeft and ArrowRight move between slots without changing the value.
• Pasting distributes valid characters across consecutive slots starting at the focused slot.
• onPaste receives only the characters accepted by inputMode, pattern, and validateChar.
• Disabled and read-only fields ignore editing and paste changes.

States and form integrationCopy Anchor Link

disabled, readOnly, error, description, placeholder, and name are supported. When name is present, the component adds a hidden form input containing the complete code:

<InputOTP
  name="verificationCode"
  label="Verification code"
  description="We sent a code to your email address."
  error={codeError}
/>

The visible slots expose individual labels such as “Character 1 of 6” to assistive technology and the complete control exposes a group label. The component does not expose the code through an unlabelled text field.

aria-label overrides the generated group name. aria-describedby can reference external help text and is combined with the generated description and error IDs. An error sets aria-invalid on every slot. id becomes the base for the group and slot IDs; a stable ID is generated when it is omitted. fullWidth makes the slot group use the available width, and className is applied to the outer field wrapper.

Theme tokensCopy Anchor Link

Input OTP consumes the shared theme tokens for surface, filled surface, control border, text, placeholder, muted text, primary focus, danger text, radius, typography, icon spacing, and font weights. Customize those values globally through ConfigProvider:

<ConfigProvider
  theme={{
    colors: {
      controlBorder: '#C7D2FE',
      controlFilled: '#F8FAFC',
      focus: '#4F46E5',
      placeholder: '#A5B4FC',
    },
    radius: '8px',
  }}
>
  <InputOTP label="Themed verification code" />
</ConfigProvider>

Component-only layout rules live in InputOTP.css; shared colors, typography, radius, and spacing remain controlled by the framework token layer.

API ReferenceCopy Anchor Link