[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Finput-phone-number":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":332,"links":333,"dates":382},"\u002Fexamples\u002Fcomponents\u002Finput-phone-number","collection","components",true,{"example_count":9,"app_count":10},25,19,{"id":12,"title":13,"description":14},203,"Input phone number","Explore how forms collect telephone details. Look at how country codes, number formatting, and supporting instructions fit around the phone input.",{"title":16,"description":17,"og_image":18},"Input phone number UI examples - Nicelydone","Input phone number UI design examples from SaaS apps. Explore how forms collect telephone details. Look at how country codes, number formatting, and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F79a4cf33-7cfd-41d2-a32a-e209cc854b57.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Input phone number UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Input phone number UI design examples from SaaS apps. Explore how forms collect telephone details. Look at how country codes, number formatting, and supporting instructions fit around the phone input.",[32],{"title":33,"description":14,"links":34},"About Input phone number",[],[36],"25 UI components",[38,68,101,122,148,170,192,210,239,269,286,310],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"3afcbbf4-55f3-403f-95f6-10cb68d97caa","Phone number input","Captures user's phone number with integrated country code selector during signup","\u002Fexamples\u002Fapps\u002Fbrowserbase\u002Fcomponents",1128,437,"Phone number input from Browserbase","component",[48],{"id":12,"title":13,"slug":49},"input-phone-number",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"browserbase","Browserbase","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F3a57506b-6fe4-4f0c-85bc-b70ea12d0216.png","Give your agents access to the whole web.",[56,60,64],{"id":57,"title":58,"slug":59},48,"Developer Tools","developer-tools",{"id":61,"title":62,"slug":63},80,"Artificial Intelligence","artificial-intelligence",{"id":65,"title":66,"slug":67},37,"Developer APIs","developer-apis",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"08b49b6f-b558-4ff3-90c5-dff4c48fa5a8","Bird UI component","A dropdown menu displaying a list of countries with their respective dialing codes and flags, allowing for selection and subsequent phone number input.","\u002Fexamples\u002Fapps\u002Fbird\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F930d8760-7bdc-4277-be96-fee83c66ac8a.png",933,995,"UI component from Bird",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"bird","Bird","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F438a1831-3604-472d-a383-2892bbd37a63.png","Unified CRM for Marketing, Service & Payments",[85,88,89,93,97],{"id":9,"title":86,"slug":87},"Marketing","marketing",{"id":65,"title":66,"slug":67},{"id":90,"title":91,"slug":92},53,"CRM","crm",{"id":94,"title":95,"slug":96},68,"SMS","sms",{"id":98,"title":99,"slug":100},92,"Email","email",{"uuid":102,"title":103,"description":104,"canonical_path":105,"image":106,"width":107,"height":108,"image_alt":109,"kind":46,"categories":110,"app":112},"738f987c-65a2-4c61-9cbf-5c35672b3a25","Cache UI component","A form field for entering a phone number with a country code selector.","\u002Fexamples\u002Fapps\u002Fcache\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F89082123-aab7-4cbb-a7bf-426f95c0491b.png",2040,417,"UI component from Cache",[111],{"id":12,"title":13,"slug":49},{"slug":113,"title":114,"logo":115,"baseline":116,"categories":117},"cache","Cache","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F58f7e879-0d35-4ce9-9cef-ccb2733b6520.png","A modern brokerage for your large stock positions",[118],{"id":119,"title":120,"slug":121},36,"Finance","finance",{"uuid":123,"title":124,"description":125,"canonical_path":126,"image":127,"width":128,"height":129,"image_alt":130,"kind":46,"categories":131,"app":133},"cf3d2867-6ea7-4ff7-b8ed-61226cabdc71","Langdock UI component","A phone number input field with country code selection.","\u002Fexamples\u002Fapps\u002Flangdock\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd9ddb242-1561-42d0-b610-8c0c724632ec.png",768,238,"UI component from Langdock",[132],{"id":12,"title":13,"slug":49},{"slug":134,"title":135,"logo":136,"baseline":137,"categories":138},"langdock","Langdock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Flangdock-c7hhj0au.png","The all-in-one AI platform for your company",[139,143,144],{"id":140,"title":141,"slug":142},22,"Knowledge Management","knowledge-management",{"id":61,"title":62,"slug":63},{"id":145,"title":146,"slug":147},105,"Workflow Automation","workflow-automation",{"uuid":149,"title":150,"description":151,"canonical_path":152,"image":153,"width":154,"height":155,"image_alt":156,"kind":46,"categories":157,"app":159},"e3a7860d-29ee-4db0-8bae-754f4e6eef8d","Claude UI component","A phone number verification modal.","\u002Fexamples\u002Fapps\u002Fclaude\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff120c778-1e03-493a-b534-22afe45a520f.png",1262,421,"UI component from Claude",[158],{"id":12,"title":13,"slug":49},{"slug":160,"title":161,"logo":162,"baseline":163,"categories":164},"claude","Claude","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fclaudeai-uayp3ffk.png","Claude is a next generation AI assistant built for work and trained to be safe, accurate, and secure",[165,166],{"id":61,"title":62,"slug":63},{"id":167,"title":168,"slug":169},30,"Productivity","productivity",{"uuid":171,"title":40,"description":172,"canonical_path":173,"image":174,"width":175,"height":176,"image_alt":177,"kind":46,"categories":178,"app":180},"36e23095-2421-4097-bd71-65653cdc33d7","A phone number input field with a country code selector and placeholder text.","\u002Fexamples\u002Fapps\u002Fstripe\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1dcf0886-9f3f-463d-ae96-5811942541bc.png",972,249,"Phone number input from Stripe",[179],{"id":12,"title":13,"slug":49},{"slug":181,"title":182,"logo":183,"baseline":184,"categories":185},"stripe","Stripe","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fstripe-ac594414.png","Payments infrastructure for the internet",[186,187,188],{"id":119,"title":120,"slug":121},{"id":65,"title":66,"slug":67},{"id":189,"title":190,"slug":191},39,"Payments","payments",{"uuid":193,"title":194,"description":195,"canonical_path":196,"image":197,"width":198,"height":199,"image_alt":200,"kind":46,"categories":201,"app":203},"097280d8-b1d1-47ac-a66c-1d9731826ba0","Wiza UI component","A phone number input field","\u002Fexamples\u002Fapps\u002Fwiza\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F000956a5-46ec-420f-8f02-db36b1dbd694.png",1030,244,"UI component from Wiza",[202],{"id":12,"title":13,"slug":49},{"slug":204,"title":205,"logo":206,"baseline":207,"categories":208},"wiza","Wiza","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fwiza-21efd5aa.png","Wiza makes prospecting magical",[209],{"id":90,"title":91,"slug":92},{"uuid":211,"title":212,"description":213,"canonical_path":214,"image":215,"width":216,"height":217,"image_alt":218,"kind":46,"categories":219,"app":221},"7f5570e8-d266-4224-aa7f-a9f8002617a6","Gusto UI component","A simple phone number input field.","\u002Fexamples\u002Fapps\u002Fgusto\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc3de8507-88c2-4f1a-8ba3-2dcc4d06c053.png",1576,382,"UI component from Gusto",[220],{"id":12,"title":13,"slug":49},{"slug":222,"title":223,"logo":224,"baseline":225,"categories":226},"gusto","Gusto","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fgusto-5e46599d.png","The all-in-one people platform for Payroll, Benefits, HR",[227,231,235],{"id":228,"title":229,"slug":230},10,"Human resources","human-resources",{"id":232,"title":233,"slug":234},56,"Accounting","accounting",{"id":236,"title":237,"slug":238},64,"Recruiting","recruiting",{"uuid":240,"title":241,"description":242,"canonical_path":243,"image":244,"width":245,"height":246,"image_alt":247,"kind":46,"categories":248,"app":250},"619c7dcb-847d-4134-befd-b1841587dba4","Dyte UI component","A phone number input field with a country code dropdown.","\u002Fexamples\u002Fapps\u002Fdyte\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F508b6878-be18-497c-8763-8e82a666380f.png",1024,253,"UI component from Dyte",[249],{"id":12,"title":13,"slug":49},{"slug":251,"title":252,"logo":253,"baseline":254,"categories":255},"dyte","Dyte","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdyte-eac67577.png","Build powerful live experiences in your product",[256,260,261,265],{"id":257,"title":258,"slug":259},70,"Video streaming","video-streaming",{"id":65,"title":66,"slug":67},{"id":262,"title":263,"slug":264},82,"Communication","communication",{"id":266,"title":267,"slug":268},100,"Video","video",{"uuid":270,"title":271,"description":195,"canonical_path":272,"image":273,"width":274,"height":275,"image_alt":276,"kind":46,"categories":277,"app":279},"c36d437a-00f8-4c72-80f4-281a440ca91c","Compound Planning UI component","\u002Fexamples\u002Fapps\u002Fcompound-planning\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F496e55c4-5094-434c-bab0-ff66917f8537.png",968,269,"UI component from Compound Planning",[278],{"id":12,"title":13,"slug":49},{"slug":280,"title":281,"logo":282,"baseline":283,"categories":284},"compound-planning","Compound Planning","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcompound-m0jdGUb.png","Modern wealth and investment management",[285],{"id":119,"title":120,"slug":121},{"uuid":287,"title":288,"description":289,"canonical_path":290,"image":291,"width":292,"height":246,"image_alt":293,"kind":46,"categories":294,"app":296},"990761a6-1d5b-40c4-a7c4-bc2657e03cd2","Luma UI component","A phone number input field with an option to switch to email input.","\u002Fexamples\u002Fapps\u002Fluma\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6156b91a-6cdf-418c-9c6d-1322f26f900a.png",752,"UI component from Luma",[295],{"id":12,"title":13,"slug":49},{"slug":297,"title":298,"logo":299,"baseline":300,"categories":301},"luma","Luma","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fluma-64c4b80f.png","Delightful events start here.",[302,306],{"id":303,"title":304,"slug":305},26,"Events","events",{"id":307,"title":308,"slug":309},4,"Ticketing","ticketing",{"uuid":311,"title":40,"description":312,"canonical_path":313,"image":314,"width":175,"height":315,"image_alt":316,"kind":46,"categories":317,"app":319},"8c2d1774-35c4-484c-bcee-2686510fa536","A form field for entering a phone number, featuring a country code selector with a flag icon and a text input for the number.","\u002Fexamples\u002Fapps\u002Fcopper\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F23e83181-aa69-41cd-bffc-fdf9cbcb976e.png",243,"Phone number input from Copperx",[318],{"id":12,"title":13,"slug":49},{"slug":320,"title":321,"logo":322,"baseline":323,"categories":324},"copper","Copperx","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcopper-ckyjtnrs.png","Simplified payments for web3 companies",[325,326,330,331],{"id":119,"title":120,"slug":121},{"id":327,"title":328,"slug":329},95,"Blockchain","blockchain",{"id":65,"title":66,"slug":67},{"id":189,"title":190,"slug":191},[],[334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379],{"label":335,"to":336},"Account Setup","\u002Fexamples\u002Fscreens\u002Faccount-setup",{"label":338,"to":339},"Sign Up","\u002Fexamples\u002Fscreens\u002Fsign-up",{"label":341,"to":342},"Form","\u002Fexamples\u002Fscreens\u002Fform",{"label":344,"to":345},"Onboarding Checklist","\u002Fexamples\u002Fscreens\u002Fonboarding-checklist",{"label":347,"to":348},"Browserbase design examples","\u002Fexamples\u002Fapps\u002Fbrowserbase",{"label":350,"to":351},"Bird design examples","\u002Fexamples\u002Fapps\u002Fbird",{"label":353,"to":354},"Cache design examples","\u002Fexamples\u002Fapps\u002Fcache",{"label":356,"to":357},"Langdock design examples","\u002Fexamples\u002Fapps\u002Flangdock",{"label":359,"to":360},"Claude design examples","\u002Fexamples\u002Fapps\u002Fclaude",{"label":362,"to":363},"Stripe design examples","\u002Fexamples\u002Fapps\u002Fstripe",{"label":365,"to":366},"Wiza design examples","\u002Fexamples\u002Fapps\u002Fwiza",{"label":368,"to":369},"Gusto design examples","\u002Fexamples\u002Fapps\u002Fgusto",{"label":371,"to":372},"Dyte design examples","\u002Fexamples\u002Fapps\u002Fdyte",{"label":374,"to":375},"Compound Planning design examples","\u002Fexamples\u002Fapps\u002Fcompound-planning",{"label":377,"to":378},"Luma design examples","\u002Fexamples\u002Fapps\u002Fluma",{"label":380,"to":381},"Copperx design examples","\u002Fexamples\u002Fapps\u002Fcopper",{"published_at":383,"updated_at":384},"2022-08-21T20:07:35.000Z","2026-09-25T00:10:25.000Z"]