One-time code input

Introduction

OneTimeCodeInput subclasses TextInput, forces type="text", and sets autocomplete="one-time-code" so mobile browsers and password managers can offer SMS/app OTP autofill. All TextInput helpers apply — mask, length, numeric, revealable (rarely useful), trim, and validation.

Each variation below includes a detailed explanation, the fluent API to paste into your schema, and light/dark screenshots of the rendered control.

Basic one-time code

Minimal OTP field ready for authenticator or SMS codes.

OneTimeCodeInput.make('otp')
    .label('Authentication code')
    .placeholder('123456')

Orbit Basic one-time code (light)

Orbit Basic one-time code (dark)

Fixed length PIN

.length(6) registers exact-length intent; combine with .numeric() and .mask() for digit-only UX.

OneTimeCodeInput.make('code')
    .label('Code')
    .length(6)
    .numeric()
    .mask('999999')

Orbit Fixed length PIN (light)

Orbit Fixed length PIN (dark)

Required OTP

Require the code on submit and autofocus for keyboard-first flows.

OneTimeCodeInput.make('otp')
    .label('One-time code')
    .required()
    .autofocus()
    .autocomplete('one-time-code')

Orbit Required OTP (light)

Orbit Required OTP (dark)

Trim pasted codes

Users often paste codes with spaces — .trim() and .strip_characters(' ') clean dehydrate state.

OneTimeCodeInput.make('otp')
    .label('Code')
    .trim()
    .strip_characters(' ')
    .length(6)

Orbit Trim pasted codes (light)

Orbit Trim pasted codes (dark)

Closures work on .label(), .helper_text(), .placeholder(), .visible(), .disabled(), and .required() where applicable — see Form closures.