[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Finput-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":359,"links":360,"dates":409},"\u002Fexamples\u002Fcomponents\u002Finput-number","collection","components",true,{"example_count":9,"app_count":10},39,31,{"id":12,"title":13,"description":14},257,"Input number","See how interfaces ask for a numeric value. Explore how field labels, units, and increment controls provide context for entering or changing a number.",{"title":16,"description":17,"og_image":18},"Input number UI examples - Nicelydone","Input number UI design examples from SaaS apps. See how interfaces ask for a numeric value. Explore how field labels, units, and increment controls provide…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8bec71f8-d631-4137-a1ce-b302317fa191.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 number UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Input number UI design examples from SaaS apps. See how interfaces ask for a numeric value. Explore how field labels, units, and increment controls provide context for entering or changing a number.",[32],{"title":33,"description":14,"links":34},"About Input number",[],[36],"39 UI components",[38,72,101,130,167,192,217,243,273,294,315,337],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"ec8347f4-dc00-44d3-a7a8-2e74c58f81e4","Airbnb UI component","User interface for selecting room and bed quantities.","\u002Fexamples\u002Fapps\u002Fairbnb\u002Fcomponents",1299,618,"UI component from Airbnb","component",[48],{"id":12,"title":13,"slug":49},"input-number",{"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},"f017135a-2bb5-483b-ad24-1df20bfc7fc1","Mailchimp UI component","A user interface section for adjusting padding values with individual controls for top, bottom, left, and right, and a checkbox to apply to all sides.","\u002Fexamples\u002Fapps\u002Fmailchimp\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1053de77-08cd-4b11-9e0b-782811587259.png",764,522,"UI component from Mailchimp",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"mailchimp","Mailchimp","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmailchimp-bd8e0c89.png","All-in-one marketing platform for small business",[89,93,97],{"id":90,"title":91,"slug":92},25,"Marketing","marketing",{"id":94,"title":95,"slug":96},27,"Email Newsletters","email-newsletters",{"id":98,"title":99,"slug":100},68,"SMS","sms",{"uuid":102,"title":103,"description":104,"canonical_path":105,"image":106,"width":107,"height":108,"image_alt":109,"kind":46,"categories":110,"app":112},"2331373d-fd97-4873-b318-b39141aae3e8","Maze UI component","A form section allowing users to specify a number of follow-up questions using a stepper control, accompanied by a privacy link.","\u002Fexamples\u002Fapps\u002Fmaze\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4028afb1-35d6-4eec-a46d-c580cb0c969f.png",1058,370,"UI component from Maze",[111],{"id":12,"title":13,"slug":49},{"slug":113,"title":114,"logo":115,"baseline":116,"categories":117},"maze","Maze","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29732693-68cb-43d3-8a42-056936993f0f.png","Rapid testing for modern teams",[118,122,126],{"id":119,"title":120,"slug":121},8,"Design","design",{"id":123,"title":124,"slug":125},69,"Surveys","surveys",{"id":127,"title":128,"slug":129},104,"User Research","user-research",{"uuid":131,"title":132,"description":133,"canonical_path":134,"image":135,"width":136,"height":137,"image_alt":138,"kind":46,"categories":139,"app":141},"1aa5401c-1391-471b-9f0b-22dd02e3d18d","Orchestra UI component","A setting to archive tasks after a certain number of days.","\u002Fexamples\u002Fapps\u002Forchestra\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F955f067b-5408-4c99-ad72-bd27e8aea0bc.png",760,192,"UI component from Orchestra",[140],{"id":12,"title":13,"slug":49},{"slug":142,"title":143,"logo":144,"baseline":145,"categories":146},"orchestra","Orchestra","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F2b0154cb-f399-4a7b-9a72-2b039e4ac541.png","A chat-centric workspace for modern teams",[147,151,155,159,163],{"id":148,"title":149,"slug":150},30,"Productivity","productivity",{"id":152,"title":153,"slug":154},23,"Collaboration","collaboration",{"id":156,"title":157,"slug":158},22,"Knowledge Management","knowledge-management",{"id":160,"title":161,"slug":162},29,"Task Management","task-management",{"id":164,"title":165,"slug":166},42,"Messaging","messaging",{"uuid":168,"title":169,"description":170,"canonical_path":171,"image":172,"width":173,"height":174,"image_alt":175,"kind":46,"categories":176,"app":178},"970797b3-7131-4ceb-9c85-80a49baaa7d0","Attio UI component","A modal showing a wait time selection.","\u002Fexamples\u002Fapps\u002Fattio\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcbe14189-a4e2-4a36-a04c-242d60fb9097.png",579,255,"UI component from Attio",[177],{"id":12,"title":13,"slug":49},{"slug":179,"title":180,"logo":181,"baseline":182,"categories":183},"attio","Attio","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fattio-nqag2fca.png","Customer relationship magic",[184,188],{"id":185,"title":186,"slug":187},53,"CRM","crm",{"id":189,"title":190,"slug":191},80,"Artificial Intelligence","artificial-intelligence",{"uuid":193,"title":194,"description":195,"canonical_path":196,"image":197,"width":198,"height":199,"image_alt":200,"kind":46,"categories":201,"app":203},"50279129-3e3e-4175-8571-000aabd74561","Kinsta UI component","The image shows a quantity selector with increment and decrement buttons, a text field displaying the quantity, and a description of the item being quantified.","\u002Fexamples\u002Fapps\u002Fkinsta\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F59e462aa-86bf-45a0-8638-229f1a6fae02.png",970,271,"UI component from Kinsta",[202],{"id":12,"title":13,"slug":49},{"slug":204,"title":205,"logo":206,"baseline":207,"categories":208},"kinsta","Kinsta","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F1206afb6-473b-4871-9c3a-5ae09d868502.png","Simply better hosting for WordPress",[209,213],{"id":210,"title":211,"slug":212},7,"Web Development","web-development",{"id":214,"title":215,"slug":216},48,"Developer Tools","developer-tools",{"uuid":218,"title":219,"description":220,"canonical_path":221,"image":222,"width":223,"height":224,"image_alt":225,"kind":46,"categories":226,"app":228},"1c147c68-c20c-4225-8afe-112f319ffe59","Reflag UI component","A filter with two dropdowns to select a number of days and weeks.","\u002Fexamples\u002Fapps\u002Freflag\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faa53a39d-b890-4447-832b-6a3bd9b76ab2.png",1307,320,"UI component from Reflag",[227],{"id":12,"title":13,"slug":49},{"slug":229,"title":230,"logo":231,"baseline":232,"categories":233},"reflag","Reflag","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Freflag-2wn2m5zj.png","Feature flags for SaaS that run on TypeScript",[234,235,239],{"id":214,"title":215,"slug":216},{"id":236,"title":237,"slug":238},35,"Feedback","feedback",{"id":240,"title":241,"slug":242},46,"Analytics","analytics",{"uuid":244,"title":245,"description":246,"canonical_path":247,"image":248,"width":249,"height":250,"image_alt":251,"kind":46,"categories":252,"app":254},"1194c52f-ea98-4feb-a9a3-de9c24a3e025","Front UI component","A notification setting with a toggle and a number input.","\u002Fexamples\u002Fapps\u002Ffront\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd6e6a62a-cf8d-4b8b-b234-78e02a9810f3.png",1812,336,"UI component from Front",[253],{"id":12,"title":13,"slug":49},{"slug":255,"title":256,"logo":257,"baseline":258,"categories":259},"front","Front","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffront-f25c6b6e.png","Email redesigned for teams",[260,261,265,269],{"id":152,"title":153,"slug":154},{"id":262,"title":263,"slug":264},47,"Customer Service","customer-service",{"id":266,"title":267,"slug":268},82,"Communication","communication",{"id":270,"title":271,"slug":272},92,"Email","email",{"uuid":274,"title":275,"description":276,"canonical_path":277,"image":278,"width":279,"height":280,"image_alt":281,"kind":46,"categories":282,"app":284},"c249b446-a6ee-4243-9b57-30a1a5b6fa5f","Secfi UI component","A number input with increment and decrement buttons.","\u002Fexamples\u002Fapps\u002Fsecfi\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffdaf64f5-0c92-40d5-b919-dc62b744f19e.png",706,287,"UI component from Secfi",[283],{"id":12,"title":13,"slug":49},{"slug":285,"title":286,"logo":287,"baseline":288,"categories":289},"secfi","Secfi","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsecfi-680f7b1f.png","The leading financial advisor for tech people",[290],{"id":291,"title":292,"slug":293},36,"Finance","finance",{"uuid":295,"title":296,"description":297,"canonical_path":298,"image":299,"width":300,"height":301,"image_alt":302,"kind":46,"categories":303,"app":305},"e64733f9-6532-47e3-aadd-353010994750","Number Input with Steppers","A numeric input field with a label, helper text, and inline minus\u002Fplus stepper buttons to adjust the value.","\u002Fexamples\u002Fapps\u002Fballpark\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F72019e99-3489-4377-9a4d-e47a14adb6ba.png",678,301,"Number Input with Steppers from Ballpark",[304],{"id":12,"title":13,"slug":49},{"slug":306,"title":307,"logo":308,"baseline":309,"categories":310},"ballpark","Ballpark","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fballpark-54hppc1c.png","Product research so simple, you’ll never skip it again.",[311,312,313,314],{"id":119,"title":120,"slug":121},{"id":236,"title":237,"slug":238},{"id":123,"title":124,"slug":125},{"id":127,"title":128,"slug":129},{"uuid":316,"title":317,"description":318,"canonical_path":319,"image":320,"width":321,"height":322,"image_alt":323,"kind":46,"categories":324,"app":326},"38221437-b417-4125-a386-c139c03ae9b3","V7 UI component","A modal with server configuration options.","\u002Fexamples\u002Fapps\u002Fv7\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F332a0e98-c222-451d-8fd9-622fd0fe6f13.png",1024,737,"UI component from V7",[325],{"id":12,"title":13,"slug":49},{"slug":327,"title":328,"logo":329,"baseline":330,"categories":331},"v7","V7","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fv7-2bfa6100.png","Workflows for data labeling and document automation",[332,333],{"id":189,"title":190,"slug":191},{"id":334,"title":335,"slug":336},105,"Workflow Automation","workflow-automation",{"uuid":338,"title":339,"description":340,"canonical_path":341,"image":342,"width":343,"height":344,"image_alt":345,"kind":46,"categories":346,"app":348},"4ccafd4c-482d-42ca-a1ec-85f327a4e846","Add Phone Number Form","A form section for adding a phone number, featuring a country code selector and an input field, enclosed within a card layout.","\u002Fexamples\u002Fapps\u002Fclerk\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe5281b19-6745-4787-bb30-a37b18902d5a.png",1474,697,"Add Phone Number Form from Clerk",[347],{"id":12,"title":13,"slug":49},{"slug":349,"title":350,"logo":351,"baseline":352,"categories":353},"clerk","Clerk","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fclerk-672b27f0.png","Authentication and User Management",[354,355],{"id":214,"title":215,"slug":216},{"id":356,"title":357,"slug":358},78,"Security","security",[],[361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406],{"label":362,"to":363},"Settings","\u002Fexamples\u002Fscreens\u002Fsettings",{"label":365,"to":366},"Edit","\u002Fexamples\u002Fscreens\u002Fedit",{"label":368,"to":369},"Form","\u002Fexamples\u002Fscreens\u002Fform",{"label":371,"to":372},"Automation","\u002Fexamples\u002Fscreens\u002Fautomation",{"label":374,"to":375},"Airbnb design examples","\u002Fexamples\u002Fapps\u002Fairbnb",{"label":377,"to":378},"Mailchimp design examples","\u002Fexamples\u002Fapps\u002Fmailchimp",{"label":380,"to":381},"Maze design examples","\u002Fexamples\u002Fapps\u002Fmaze",{"label":383,"to":384},"Orchestra design examples","\u002Fexamples\u002Fapps\u002Forchestra",{"label":386,"to":387},"Attio design examples","\u002Fexamples\u002Fapps\u002Fattio",{"label":389,"to":390},"Kinsta design examples","\u002Fexamples\u002Fapps\u002Fkinsta",{"label":392,"to":393},"Reflag design examples","\u002Fexamples\u002Fapps\u002Freflag",{"label":395,"to":396},"Front design examples","\u002Fexamples\u002Fapps\u002Ffront",{"label":398,"to":399},"Secfi design examples","\u002Fexamples\u002Fapps\u002Fsecfi",{"label":401,"to":402},"Ballpark design examples","\u002Fexamples\u002Fapps\u002Fballpark",{"label":404,"to":405},"V7 design examples","\u002Fexamples\u002Fapps\u002Fv7",{"label":407,"to":408},"Clerk design examples","\u002Fexamples\u002Fapps\u002Fclerk",{"published_at":410,"updated_at":411},"2022-08-24T15:38:19.000Z","2026-09-17T10:44:16.000Z"]