OTPField

One-time-code entry with paste, masking, and autofill projection.

Anatomy reference Framework guide

OTPField / interactiveFluid · fits available space

Verification code

—

Paste all six digits into any field.

Semantic parts

Spread each part getter onto the matching element, then style its stable state attributes.

rootinputseparatorhidden-input

Keyboard guidance

Tab into the six-slot numeric code. Typing advances through slots; pasting a code distributes accepted characters. Slot arrows respect text direction.

Keys from the Clank controller contract, with preview and configuration notes. Disabled or read-only controls may prevent changes.

ArrowLeft: Move one logical slot according to text direction.
ArrowRight: Move one logical slot according to text direction.
Home: Focus the first slot.
End: Focus the last slot.
Backspace: Clear the current slot, or the previous slot when empty.
Delete: Clear the current slot.