---
title: "OTP Input — Free Framer component · Best of Framer"
description: "Free Framer component · by vivi park · Forms. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/otp-input"
---

[Home](/)/[Components](/components)/[Forms](/components/category/forms)/OTP Input

# OTP Input

Verification code field

[View on Framer](https://framer.com/marketplace/components/otp-input/?via=elliot-li)

![OTP Input preview image 1](https://framer.elliotli.dev/og/component/otp-input/ccdc20bd2f218d09/1600x1200.jpg)

## Summary

Verification code field

## Description

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.

Get all four in one place, plus a note when a new one lands: https://bold-wheel-055406.framer.app/pack

## Rank history [How rankings work →](/terms#rankings)

-   All · #5929

## Details

- **Author**: vivi park
- **Published**: 2026-08-09
- **Updated**: 2026-08-25
- **Added**: 2026-08-09
- **Categories**: Forms

## More across types

-   [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love

## More like this

-   [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing
-   [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK
-   [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield
-   [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from