[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Finput-code":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":355,"links":356,"dates":405},"\u002Fexamples\u002Fcomponents\u002Finput-code","collection","components",true,{"example_count":9,"app_count":10},100,71,{"id":12,"title":13,"description":14},288,"Input code","See how interfaces ask for a verification or access code. Explore how character fields, instructions, and related actions fit into a compact code-entry component.",{"title":16,"description":17,"og_image":18},"Input code UI examples - Nicelydone","Input code UI design examples from SaaS apps. See how interfaces ask for a verification or access code. Explore how character fields, instructions, and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd0fe1a75-e277-479e-9776-b15b5497927d.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 code UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Input code UI design examples from SaaS apps. See how interfaces ask for a verification or access code. Explore how character fields, instructions, and related actions fit into a compact code-entry…",[32],{"title":33,"description":14,"links":34},"About Input code",[],[36],"100 UI components",[38,72,93,126,151,177,203,229,260,280,302,332],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"0cdfe509-b002-445c-b122-11b332a636e4","Airbnb UI component","A screen for confirming identity by entering a verification code sent to an email address.","\u002Fexamples\u002Fapps\u002Fairbnb\u002Fcomponents",832,502,"UI component from Airbnb","component",[48],{"id":12,"title":13,"slug":49},"input-code",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"airbnb","Airbnb","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fairbnb-2b8cc5d2.png","Book unique homes and experience a city like a local",[56,60,64,68],{"id":57,"title":58,"slug":59},5,"Travel","travel",{"id":61,"title":62,"slug":63},12,"Hospitality","hospitality",{"id":65,"title":66,"slug":67},17,"Peer to peer","peer-to-peer",{"id":69,"title":70,"slug":71},18,"Marketplace","marketplace",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"8d101778-9d8f-41a5-899d-44bd25bd9942","Visitors UI component","A user interface for entering a verification code sent to an email address.","\u002Fexamples\u002Fapps\u002Fvisitors\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8a591ba1-5d95-4234-af53-df8f33592c0b.png",825,429,"UI component from Visitors",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"visitors","Visitors","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fba53672a-9799-4a87-8187-a0b0c0766b64.png","Revenue-first web analytics",[89],{"id":90,"title":91,"slug":92},46,"Analytics","analytics",{"uuid":94,"title":95,"description":96,"canonical_path":97,"image":98,"width":99,"height":100,"image_alt":101,"kind":46,"categories":102,"app":104},"813227e2-faaa-43ba-8a9e-f40c88252718","OTP Code Input","Captures 6-digit email verification code with resend and verify actions","\u002Fexamples\u002Fapps\u002Fbeside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8cd65b54-93fa-455d-a160-d7d3d50742b3.png",1048,817,"OTP Code Input from Beside",[103],{"id":12,"title":13,"slug":49},{"slug":105,"title":106,"logo":107,"baseline":108,"categories":109},"beside","Beside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F8c14025e-58b4-4801-bd91-3e31a3cf8f21.png","AI-powered business phone assistant that answers calls and takes action",[110,114,118,122],{"id":111,"title":112,"slug":113},80,"Artificial Intelligence","artificial-intelligence",{"id":115,"title":116,"slug":117},47,"Customer Service","customer-service",{"id":119,"title":120,"slug":121},53,"CRM","crm",{"id":123,"title":124,"slug":125},82,"Communication","communication",{"uuid":127,"title":128,"description":129,"canonical_path":130,"image":131,"width":132,"height":133,"image_alt":134,"kind":46,"categories":135,"app":137},"51d75bf6-d795-4a3b-b011-ef81eb61b670","OTP input","Collects the 6-digit email verification code from the user","\u002Fexamples\u002Fapps\u002Ffamily\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4f08e3b3-1d09-4195-a770-e7c070cc7185.png",948,740,"OTP input from Family",[136],{"id":12,"title":13,"slug":49},{"slug":138,"title":139,"logo":140,"baseline":141,"categories":142},"family","Family","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F54b399c5-e1bc-4b2d-9748-6c66246cee2b.png","Your favorite crypto wallet.",[143,147],{"id":144,"title":145,"slug":146},36,"Finance","finance",{"id":148,"title":149,"slug":150},95,"Blockchain","blockchain",{"uuid":152,"title":153,"description":154,"canonical_path":155,"image":156,"width":157,"height":158,"image_alt":159,"kind":46,"categories":160,"app":162},"dd487340-7d94-4153-b02d-373ca470f7ce","OTP Input Form","Captures 6-digit verification code sent to phone during signup","\u002Fexamples\u002Fapps\u002Fbrowserbase\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F026cfb6f-ed4a-4043-ac6e-d387990dd55e.png",974,797,"OTP Input Form from Browserbase",[161],{"id":12,"title":13,"slug":49},{"slug":163,"title":164,"logo":165,"baseline":166,"categories":167},"browserbase","Browserbase","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F3a57506b-6fe4-4f0c-85bc-b70ea12d0216.png","Give your agents access to the whole web.",[168,172,173],{"id":169,"title":170,"slug":171},48,"Developer Tools","developer-tools",{"id":111,"title":112,"slug":113},{"id":174,"title":175,"slug":176},37,"Developer APIs","developer-apis",{"uuid":178,"title":179,"description":180,"canonical_path":181,"image":182,"width":183,"height":184,"image_alt":185,"kind":46,"categories":186,"app":188},"51ff8a6a-bdea-4fa4-8100-c89882b972ea","Flora UI component","A modal dialog for entering a six-digit authenticator code.","\u002Fexamples\u002Fapps\u002Fflora\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdee94caa-a3da-47ca-a962-056467aa7800.png",1087,445,"UI component from Flora",[187],{"id":12,"title":13,"slug":49},{"slug":189,"title":190,"logo":191,"baseline":192,"categories":193},"flora","Flora","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F5c3c6f99-7e88-4853-9e21-6fd175f2aa62.png","Your creative environement",[194,195,199],{"id":111,"title":112,"slug":113},{"id":196,"title":197,"slug":198},8,"Design","design",{"id":200,"title":201,"slug":202},23,"Collaboration","collaboration",{"uuid":204,"title":205,"description":206,"canonical_path":207,"image":208,"width":209,"height":210,"image_alt":211,"kind":46,"categories":212,"app":214},"c47d93a9-7695-4286-b4dd-cb7507d673ee","Lovable UI component","A screen for entering a 6-digit verification code sent to a phone.","\u002Fexamples\u002Fapps\u002Flovable\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F687529d0-1747-44eb-89c8-89b63fb94429.png",881,652,"UI component from Lovable",[213],{"id":12,"title":13,"slug":49},{"slug":215,"title":216,"logo":217,"baseline":218,"categories":219},"lovable","Lovable","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F371498a3-d8de-4908-8af8-e73a603ffa34.png","Create apps and websites by chatting with AI",[220,221,225],{"id":111,"title":112,"slug":113},{"id":222,"title":223,"slug":224},7,"Web Development","web-development",{"id":226,"title":227,"slug":228},96,"No code","no-code",{"uuid":230,"title":231,"description":232,"canonical_path":233,"image":234,"width":235,"height":236,"image_alt":237,"kind":46,"categories":238,"app":240},"0b12214e-7032-412f-9037-622c6b54b2b6","Bird UI component","A screen prompting the user to enter a verification code sent to a specified phone number.","\u002Fexamples\u002Fapps\u002Fbird\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb8a298e7-018e-455e-8cdc-7975012645e7.png",898,481,"UI component from Bird",[239],{"id":12,"title":13,"slug":49},{"slug":241,"title":242,"logo":243,"baseline":244,"categories":245},"bird","Bird","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F438a1831-3604-472d-a383-2892bbd37a63.png","Unified CRM for Marketing, Service & Payments",[246,250,251,252,256],{"id":247,"title":248,"slug":249},25,"Marketing","marketing",{"id":174,"title":175,"slug":176},{"id":119,"title":120,"slug":121},{"id":253,"title":254,"slug":255},68,"SMS","sms",{"id":257,"title":258,"slug":259},92,"Email","email",{"uuid":261,"title":262,"description":263,"canonical_path":264,"image":265,"width":266,"height":267,"image_alt":268,"kind":46,"categories":269,"app":271},"4e2992ae-e4bf-4d32-bc2f-f3b8ae825ad8","Paper UI component","Email verification screen with a code input field","\u002Fexamples\u002Fapps\u002Fpaper\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa38c33a4-cb68-47c9-8b70-48e3edfe7969.png",1136,822,"UI component from Paper",[270],{"id":12,"title":13,"slug":49},{"slug":272,"title":273,"logo":274,"baseline":275,"categories":276},"paper","Paper","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6406196d-df59-4e20-b60a-7d067ada271c.png","Design, share, ship",[277,278,279],{"id":222,"title":223,"slug":224},{"id":196,"title":197,"slug":198},{"id":200,"title":201,"slug":202},{"uuid":281,"title":282,"description":283,"canonical_path":284,"image":285,"width":286,"height":287,"image_alt":288,"kind":46,"categories":289,"app":291},"7cae496c-6eac-4758-918a-c71cce980fb8","Morphic UI component","A modal window for email verification, prompting the user to check their email for a link or enter a six-digit code.","\u002Fexamples\u002Fapps\u002Fmorphic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa91ec09d-a743-49b4-881e-943650987ae7.png",718,571,"UI component from Morphic",[290],{"id":12,"title":13,"slug":49},{"slug":292,"title":293,"logo":294,"baseline":295,"categories":296},"morphic","Morphic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F17b1263a-8707-435d-8214-460280911e23.png","A new era of storytelling",[297,300,301],{"id":9,"title":298,"slug":299},"Video","video",{"id":196,"title":197,"slug":198},{"id":111,"title":112,"slug":113},{"uuid":303,"title":304,"description":305,"canonical_path":306,"image":307,"width":308,"height":309,"image_alt":310,"kind":46,"categories":311,"app":313},"6e53184b-1912-47aa-8d7f-323caefce7e5","Dovetail UI component","A user interface for identity verification requiring a 6-digit code sent to an email address.","\u002Fexamples\u002Fapps\u002Fdovetail\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2447cf9f-122b-4ea4-8b3d-94665523f0ab.png",896,1061,"UI component from Dovetail",[312],{"id":12,"title":13,"slug":49},{"slug":314,"title":315,"logo":316,"baseline":317,"categories":318},"dovetail","Dovetail","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6b47c81d-b89f-43c4-9087-0c1e1df518d7.png","Helps you with the key steps of UX research",[319,320,324,328],{"id":196,"title":197,"slug":198},{"id":321,"title":322,"slug":323},22,"Knowledge Management","knowledge-management",{"id":325,"title":326,"slug":327},35,"Feedback","feedback",{"id":329,"title":330,"slug":331},104,"User Research","user-research",{"uuid":333,"title":334,"description":335,"canonical_path":336,"image":337,"width":338,"height":339,"image_alt":340,"kind":46,"categories":341,"app":343},"1e944e71-0646-4aa5-ac2e-705c63c973ab","Kinescope UI component","Email verification code entry screen","\u002Fexamples\u002Fapps\u002Fkinescope\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9f6c0696-cb30-4621-ae48-dbb29479d4f9.png",1074,706,"UI component from Kinescope",[342],{"id":12,"title":13,"slug":49},{"slug":344,"title":345,"logo":346,"baseline":347,"categories":348},"kinescope","Kinescope","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F7f0420a9-24bf-46c4-89d3-9b58d519e10a.png","Videoinfrastructure made for every story",[349,350,354],{"id":174,"title":175,"slug":176},{"id":351,"title":352,"slug":353},70,"Video streaming","video-streaming",{"id":9,"title":298,"slug":299},[],[357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402],{"label":358,"to":359},"Verification","\u002Fexamples\u002Fscreens\u002Fverification",{"label":361,"to":362},"Confirmation","\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":364,"to":365},"Sign In","\u002Fexamples\u002Fscreens\u002Fsign-in",{"label":367,"to":368},"Sign Up","\u002Fexamples\u002Fscreens\u002Fsign-up",{"label":370,"to":371},"Airbnb design examples","\u002Fexamples\u002Fapps\u002Fairbnb",{"label":373,"to":374},"Visitors design examples","\u002Fexamples\u002Fapps\u002Fvisitors",{"label":376,"to":377},"Beside design examples","\u002Fexamples\u002Fapps\u002Fbeside",{"label":379,"to":380},"Family design examples","\u002Fexamples\u002Fapps\u002Ffamily",{"label":382,"to":383},"Browserbase design examples","\u002Fexamples\u002Fapps\u002Fbrowserbase",{"label":385,"to":386},"Flora design examples","\u002Fexamples\u002Fapps\u002Fflora",{"label":388,"to":389},"Lovable design examples","\u002Fexamples\u002Fapps\u002Flovable",{"label":391,"to":392},"Bird design examples","\u002Fexamples\u002Fapps\u002Fbird",{"label":394,"to":395},"Paper design examples","\u002Fexamples\u002Fapps\u002Fpaper",{"label":397,"to":398},"Morphic design examples","\u002Fexamples\u002Fapps\u002Fmorphic",{"label":400,"to":401},"Dovetail design examples","\u002Fexamples\u002Fapps\u002Fdovetail",{"label":403,"to":404},"Kinescope design examples","\u002Fexamples\u002Fapps\u002Fkinescope",{"published_at":406,"updated_at":407},"2023-03-02T14:21:21.000Z","2026-09-17T10:44:16.000Z"]