5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T106a,

About

This component is a phone number input field for Framer forms that combines a searchable country dial code selector with a standard phone number text field. Users pick their country from a dropdown showing flags, country names, and dial codes, then type their number in the field next to it. It works natively with Framer's built-in form system, which means submissions are automatically captured and sent through Framer's free built-in email notifications and Google Sheets integration, no third party tools needed.

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library

Instructions

Go to Insert → Form Builder in Framer to create a native Framer form on your canvas.
Copy the component code from the site and paste it directly into your Framer project file.
Place the Phone Number Input component inside the Form Builder frame as it will not capture form data if placed outside it.
In the right panel, set the Name (the field label in your form submission), choose a Default Country, set your Placeholder text, and toggle Required on or off.
Adjust all visual settings including colours, fonts, border, focus style, selector elements, and dropdown appearance under Input Style and Dropdown Style in the right panel.
Connect your form's submit button to Framer's native form actions to send submissions to your email or Google Sheets for free, no extra tools or integrations needed.

How It Works

The component must live inside a native Framer form to capture and submit data correctly. The left side is the country selector showing the flag, dial code, and a dropdown arrow, all of which can be toggled on or off. The right side is the phone number text input. Under Input Style you control the shared look of both sides including background, border, padding, font, border radius, and the focus state. The Selector section within Input Style lets you control the flag, dial code visibility, arrow size and colour, and the gap between elements. Dropdown Style controls the appearance of the country list including the search box at the top.

What You Get

When you purchase this component, you'll receive:

The Component Itself - Full access to the component all future updates
Remix File with Component Setup - A complete Remix file with the component pre-configured and ready to integrate into your project.
Setup Instructions - Clear, step-by-step instructions to help you implement the component quickly and correctly.
Dedicated Support - Direct access to our team for assistance if you encounter any issues during setup or implementation.

Support

For any queries and help setting up the component, contact hello@segmentui.com

Refund Policy

If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.

5a:[["$","$L5d",null,{"post":{"id":"019d4d43-7c76-7a6e-a28a-ba2624dcb903","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c2416123-d980-4151-8f22-376832daa9b9","name":"Nabeel","slug":"nabeel","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29351/dpAI-XbLekovJheHW07MMGLXwmYTW0u3mgr.jpeg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"39zgHeuUmqzGvnwvW4EB","resolved":true,"title":"Phone Number Input","body":"$5e","bodyJson":null,"introduction":"A searchable phone number input field ","slug":"phone-number-input","author":{"framerUserId":"c2416123-d980-4151-8f22-376832daa9b9","name":"Nabeel","slug":"nabeel","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29351/dpAI-XbLekovJheHW07MMGLXwmYTW0u3mgr.jpeg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/39zgHeuUmqzGvnwvW4EB/phone-number-input-onefz5KU92Mvh67gF4PDmaAHqjJSxk","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-13T19:09:08.672Z","updatedAt":"2026-04-02T08:22:09.729Z","publishedAt":"2026-04-02T08:16:01.654Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://lightprolibrary.framer.website/form/phonenumber","price":"9","paymentUrl":"https://lymeriastudio.lemonsqueezy.com/checkout/buy/760f06e2-0d29-4190-ac6a-9429c8fae720","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"9dLBS48cODs07hC4NA7Y","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-02T08:16:01.654Z","updatedAt":"2026-04-02T08:16:01.654Z","reported":false}}],"$L5f"]

Suggested for you