[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Finput-amount":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":261,"links":262,"dates":302},"\u002Fexamples\u002Fcomponents\u002Finput-amount","collection","components",true,{"example_count":9,"app_count":10},15,9,{"id":12,"title":13,"description":14},198,"Input amount","Explore how interfaces collect monetary amounts. Look at the placement of currency labels, numeric values, and supporting context within payment and budgeting inputs.",{"title":16,"description":17,"og_image":18},"Input amount UI examples - Nicelydone","Input amount UI design examples from SaaS apps. Explore how interfaces collect monetary amounts. Look at the placement of currency labels, numeric values,…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0beda19f-409e-4ea2-a11e-61abaea00d98.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 amount UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Input amount UI design examples from SaaS apps. Explore how interfaces collect monetary amounts. Look at the placement of currency labels, numeric values, and supporting context within payment and…",[32],{"title":33,"description":14,"links":34},"About Input amount",[],[36],"15 UI components",[38,76,98,128,157,177,198,218,243],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"9b90efb4-504e-4ae9-9f12-a5ed7d70637a","Outseta UI component","A simple input field for entering an amount.","\u002Fexamples\u002Fapps\u002Foutseta\u002Fcomponents",1364,372,"UI component from Outseta","component",[48],{"id":12,"title":13,"slug":49},"input-amount",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"outseta","Outseta","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F936c2a3c-b3fd-40ad-a0f0-efcb89fadd6c.png","The membership operating system",[56,60,64,68,72],{"id":57,"title":58,"slug":59},1,"Communities","communities",{"id":61,"title":62,"slug":63},92,"Email","email",{"id":65,"title":66,"slug":67},53,"CRM","crm",{"id":69,"title":70,"slug":71},39,"Payments","payments",{"id":73,"title":74,"slug":75},47,"Customer Service","customer-service",{"uuid":77,"title":78,"description":79,"canonical_path":80,"image":81,"width":82,"height":83,"image_alt":84,"kind":46,"categories":85,"app":87},"d65c5d61-b4af-488b-b38a-b17b28042dc0","Twenty UI component","The screenshot shows a form with fields for address, ARR (Annual Recurring Revenue), and creator.","\u002Fexamples\u002Fapps\u002Ftwenty\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F71983b79-f301-4c97-a0be-b7974fe2c7fc.png",1064,327,"UI component from Twenty",[86],{"id":12,"title":13,"slug":49},{"slug":88,"title":89,"logo":90,"baseline":91,"categories":92},"twenty","Twenty","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F958b58b6-f349-407c-8a71-bb683f68bcd2.png","The #1 Open-Source CRM",[93,94],{"id":65,"title":66,"slug":67},{"id":95,"title":96,"slug":97},45,"Open Source","open-source",{"uuid":99,"title":100,"description":101,"canonical_path":102,"image":103,"width":104,"height":105,"image_alt":106,"kind":46,"categories":107,"app":109},"f48d39af-259b-4361-ae0a-22dd5bb6a2a0","Polar UI component","Payment modal","\u002Fexamples\u002Fapps\u002Fpolar\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F221bde70-2929-410d-a86b-f40a8d1606e4.png",1199,532,"UI component from Polar",[108],{"id":12,"title":13,"slug":49},{"slug":110,"title":111,"logo":112,"baseline":113,"categories":114},"polar","Polar","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fpolar-3d0012c1.png","Sell SaaS and digital products in minutes",[115,119,120,124],{"id":116,"title":117,"slug":118},36,"Finance","finance",{"id":69,"title":70,"slug":71},{"id":121,"title":122,"slug":123},48,"Developer Tools","developer-tools",{"id":125,"title":126,"slug":127},37,"Developer APIs","developer-apis",{"uuid":129,"title":130,"description":131,"canonical_path":132,"image":133,"width":134,"height":135,"image_alt":136,"kind":46,"categories":137,"app":139},"4953ce1f-4d84-4635-95eb-4d844a9b2221","Credit purchase input","A numeric input field for purchasing API credits, featuring a dollar sign icon and a question prompt.","\u002Fexamples\u002Fapps\u002Fperplexity\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F115faac2-ff4c-4cf2-bf3b-0bcd5179572a.png",764,274,"Credit purchase input from Perplexity",[138],{"id":12,"title":13,"slug":49},{"slug":140,"title":141,"logo":142,"baseline":143,"categories":144},"perplexity","Perplexity","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fperplexity-f963a769.png","World's first conversational answer engine and research companion",[145,149,153],{"id":146,"title":147,"slug":148},80,"Artificial Intelligence","artificial-intelligence",{"id":150,"title":151,"slug":152},22,"Knowledge Management","knowledge-management",{"id":154,"title":155,"slug":156},55,"Search engine","search-engine",{"uuid":158,"title":159,"description":160,"canonical_path":161,"image":162,"width":163,"height":164,"image_alt":165,"kind":46,"categories":166,"app":168},"0e5a4b8c-ba91-4df4-89a9-a776e662f706","Currency input field","A text input field designed for entering currency amounts, featuring a label with an info icon, placeholder text, and a currency symbol suffix.","\u002Fexamples\u002Fapps\u002Fbuena\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F52612a23-72fa-4c5e-8afb-77404d007a89.png",3120,383,"Currency input field from Buena",[167],{"id":12,"title":13,"slug":49},{"slug":169,"title":170,"logo":171,"baseline":172,"categories":173},"buena","Buena","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbuena-5b3e0a86.png","Property management, as it should be",[174],{"id":10,"title":175,"slug":176},"Real Estate","real-estate",{"uuid":178,"title":159,"description":179,"canonical_path":180,"image":181,"width":182,"height":183,"image_alt":184,"kind":46,"categories":185,"app":187},"4645be1f-7163-44e2-8da1-13763d30321a","A form field for entering a monetary amount, featuring a label 'Invested' and an input box with a currency prefix 'USD ($)' and a pre-filled value '14,000.00'.","\u002Fexamples\u002Fapps\u002Fangellist\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1b17a473-6ff5-44d2-b068-d9a88a12ebd9.png",528,259,"Currency input field from Angellist",[186],{"id":12,"title":13,"slug":49},{"slug":188,"title":189,"logo":190,"baseline":191,"categories":192},"angellist","Angellist","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fangellist-c5f0f682.png","Build, Lead, Invest",[193,194],{"id":116,"title":117,"slug":118},{"id":195,"title":196,"slug":197},63,"Startups","startups",{"uuid":199,"title":200,"description":201,"canonical_path":202,"image":203,"width":204,"height":205,"image_alt":206,"kind":46,"categories":207,"app":209},"53d652a9-bd22-4a54-876f-6ed8f040155e","Currency Input Field","A form field for entering a maximum principal balance, featuring a dollar sign prefix, a placeholder for the amount, and a currency selector dropdown.","\u002Fexamples\u002Fapps\u002Fcolumn\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faaee4b9f-6766-43f7-b654-77c3b358db55.png",1268,379,"Currency Input Field from Column",[208],{"id":12,"title":13,"slug":49},{"slug":210,"title":211,"logo":212,"baseline":213,"categories":214},"column","Column","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcolumn-60eggyn0.png","The developer infrastructure bank",[215,216,217],{"id":116,"title":117,"slug":118},{"id":125,"title":126,"slug":127},{"id":69,"title":70,"slug":71},{"uuid":219,"title":220,"description":221,"canonical_path":222,"image":223,"width":224,"height":225,"image_alt":226,"kind":46,"categories":227,"app":229},"0b30ce19-bca8-455b-bdb6-f81c5c0526ca","Currency Input Fields","Two horizontal input fields for entering budget and billable rate amounts in Euros.","\u002Fexamples\u002Fapps\u002Fharvest\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbc6ffce3-10f3-4e2e-a4b9-4380c1539667.png",1280,381,"Currency Input Fields from Harvest",[228],{"id":12,"title":13,"slug":49},{"slug":230,"title":231,"logo":232,"baseline":233,"categories":234},"harvest","Harvest","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fharvest-4a1bfc79.png","Time tracking software with invoicing",[235,239],{"id":236,"title":237,"slug":238},30,"Productivity","productivity",{"id":240,"title":241,"slug":242},56,"Accounting","accounting",{"uuid":244,"title":245,"description":246,"canonical_path":247,"image":248,"width":249,"height":250,"image_alt":251,"kind":46,"categories":252,"app":254},"17393595-44ea-48d4-97e4-3c878debc21e","Spending limit inputs","A row containing a dropdown to select the limit type and a number input for the monthly spending limit.","\u002Fexamples\u002Fapps\u002Fmercury\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F17393595-44ea-48d4-97e4-3c878debc21e.png",832,247,"Spending limit inputs from Mercury",[253],{"id":12,"title":13,"slug":49},{"slug":255,"title":256,"logo":257,"baseline":258,"categories":259},"mercury","Mercury","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmercury-2e3d5425.png","Banking for startups",[260],{"id":116,"title":117,"slug":118},[],[263,266,269,272,275,278,281,284,287,290,293,296,299],{"label":264,"to":265},"Add & Create","\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":267,"to":268},"Error","\u002Fexamples\u002Fscreens\u002Ferror",{"label":270,"to":271},"Setup Wizard","\u002Fexamples\u002Fscreens\u002Fsetup-wizard",{"label":273,"to":274},"API Keys","\u002Fexamples\u002Fscreens\u002Fapi-keys",{"label":276,"to":277},"Outseta design examples","\u002Fexamples\u002Fapps\u002Foutseta",{"label":279,"to":280},"Twenty design examples","\u002Fexamples\u002Fapps\u002Ftwenty",{"label":282,"to":283},"Polar design examples","\u002Fexamples\u002Fapps\u002Fpolar",{"label":285,"to":286},"Perplexity design examples","\u002Fexamples\u002Fapps\u002Fperplexity",{"label":288,"to":289},"Buena design examples","\u002Fexamples\u002Fapps\u002Fbuena",{"label":291,"to":292},"Angellist design examples","\u002Fexamples\u002Fapps\u002Fangellist",{"label":294,"to":295},"Column design examples","\u002Fexamples\u002Fapps\u002Fcolumn",{"label":297,"to":298},"Harvest design examples","\u002Fexamples\u002Fapps\u002Fharvest",{"label":300,"to":301},"Mercury design examples","\u002Fexamples\u002Fapps\u002Fmercury",{"published_at":303,"updated_at":304},"2022-08-21T20:07:35.000Z","2026-09-18T12:15:36.000Z"]