A segmented verification code field — the kind you see after "we sent you a code".
Framer's native form fields are Text, Checkbox, Radio and Select only, so there is no way to build one on the canvas. Three things make or break an OTP field, and this handles all three.
Typing moves forward. Each character lands in its own box and focus advances.
Backspace moves back. On an empty box it clears the one before it and steps back.
Pasting fills everything. Paste "739 2045" into a 6-digit field and it strips the space, fills all six boxes, and drops the extra character.
autocomplete="one-time-code" is set, so browsers offer the SMS code above the keyboard.
16 properties, all on the canvas: Digits (2-12) · Numbers or letters+numbers · Mask · Auto focus · Placeholder · Box size · Gap · Radius · Size · Border width · Text · Box fill · Empty · Filled · Focus · Error
The assembled code is carried in a hidden field named "code", so a surrounding Framer form submits it with everything else.
Auto width · auto height.
A segmented verification code field — the kind you see after "we sent you a code".
Framer's native form fields are Text, Checkbox, Radio and Select only, so there is no way to build one on the canvas. Three things make or break an OTP field, and this handles all three.
Typing moves forward. Each character lands in its own box and focus advances.
Backspace moves back. On an empty box it clears the one before it and steps back.
Pasting fills everything. Paste "739 2045" into a 6-digit field and it strips the space, fills all six boxes, and drops the extra character.
autocomplete="one-time-code" is set, so browsers offer the SMS code above the keyboard.
16 properties, all on the canvas: Digits (2-12) · Numbers or letters+numbers · Mask · Auto focus · Placeholder · Box size · Gap · Radius · Size · Border width · Text · Box fill · Empty · Filled · Focus · Error
The assembled code is carried in a hidden field named "code", so a surrounding Framer form submits it with everything else.
Auto width · auto height.
