[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fform-element":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":336,"links":337,"dates":386},"\u002Fexamples\u002Fcomponents\u002Fform-element","collection","components",true,{"example_count":9,"app_count":10},77,64,{"id":12,"title":13,"description":14},243,"Form element","Explore how interfaces combine a field with the information needed to complete it. Look at label placement, supporting text, and validation messages around individual form controls.",{"title":16,"description":17,"og_image":18},"Form element UI examples - Nicelydone","Form element UI design examples from SaaS apps. Explore how interfaces combine a field with the information needed to complete it. Look at label placement,…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc3d02d23-53e5-4c3e-bd12-ba9dc791af54.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Form element UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Form element UI design examples from SaaS apps. Explore how interfaces combine a field with the information needed to complete it. Look at label placement, supporting text, and validation messages around…",[32],{"title":33,"description":14,"links":34},"About Form element",[],[36],"77 UI components",[38,60,81,110,144,177,199,218,239,262,284,306],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"addd8b47-19e2-4bda-8976-96bb3665278c","Poolside UI component","A contact form for business inquiries about becoming an AI company, targeting regulated industries.","\u002Fexamples\u002Fapps\u002Fpoolside\u002Fcomponents",2495,1403,"UI component from Poolside","component",[48],{"id":12,"title":13,"slug":49},"form-element",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"poolside","Poolside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fde1e48e8-a8ea-49fc-a7ae-809596fc1bd8.png","Iterate on web apps, APIs, and CLIs from scratch, in a single workspace",[56],{"id":57,"title":58,"slug":59},80,"Artificial Intelligence","artificial-intelligence",{"uuid":61,"title":62,"description":63,"canonical_path":64,"image":65,"width":66,"height":67,"image_alt":68,"kind":46,"categories":69,"app":71},"389ac312-77d8-4622-a8b6-c62a9d2a10e5","Aboard UI component","A web page displaying a form to request a product demo.","\u002Fexamples\u002Fapps\u002Faboard\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F22d6b27e-7b3b-4ea1-b3ad-3b0f71ee7779.png",1591,2019,"UI component from Aboard",[70],{"id":12,"title":13,"slug":49},{"slug":72,"title":73,"logo":74,"baseline":75,"categories":76},"aboard","Aboard","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fea3ae2e7-7419-4926-acae-b179668f6172.png","Bring joy to your workplace with Aboard",[77],{"id":78,"title":79,"slug":80},10,"Human resources","human-resources",{"uuid":82,"title":83,"description":84,"canonical_path":85,"image":86,"width":87,"height":88,"image_alt":89,"kind":46,"categories":90,"app":92},"65dbfefb-c48f-4a4c-b386-906c95e9a79e","Liveblocks UI component","A dark-themed web page featuring a contact form to schedule a call and a customer testimonial.","\u002Fexamples\u002Fapps\u002Fliveblocks\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F83acf771-3500-4d57-8f5d-81de14491de8.png",2250,1939,"UI component from Liveblocks",[91],{"id":12,"title":13,"slug":49},{"slug":93,"title":94,"logo":95,"baseline":96,"categories":97},"liveblocks","Liveblocks","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F081e178d-2cab-4e0b-93f8-061e021783fa.png","Build amazing real‑time collaborative products",[98,102,106],{"id":99,"title":100,"slug":101},48,"Developer Tools","developer-tools",{"id":103,"title":104,"slug":105},23,"Collaboration","collaboration",{"id":107,"title":108,"slug":109},37,"Developer APIs","developer-apis",{"uuid":111,"title":112,"description":113,"canonical_path":114,"image":115,"width":116,"height":117,"image_alt":118,"kind":46,"categories":119,"app":121},"74dadc26-e89f-4168-9645-2702e12bb7ea","Bird UI component","A web form for expressing interest in becoming a partner, requesting contact and company information.","\u002Fexamples\u002Fapps\u002Fbird\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F274b8056-99e7-4bae-9041-02ca4d0c35cb.png",3054,2930,"UI component from Bird",[120],{"id":12,"title":13,"slug":49},{"slug":122,"title":123,"logo":124,"baseline":125,"categories":126},"bird","Bird","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F438a1831-3604-472d-a383-2892bbd37a63.png","Unified CRM for Marketing, Service & Payments",[127,131,132,136,140],{"id":128,"title":129,"slug":130},25,"Marketing","marketing",{"id":107,"title":108,"slug":109},{"id":133,"title":134,"slug":135},53,"CRM","crm",{"id":137,"title":138,"slug":139},68,"SMS","sms",{"id":141,"title":142,"slug":143},92,"Email","email",{"uuid":145,"title":146,"description":147,"canonical_path":148,"image":149,"width":150,"height":151,"image_alt":152,"kind":46,"categories":153,"app":155},"2645c66a-20b9-4ebe-a24c-6ed6c05a0b5c","Dovetail UI component","A modal window for editing a widget, allowing users to select a widget type, data source, timeframe, and interval, with a preview area showing an empty state.","\u002Fexamples\u002Fapps\u002Fdovetail\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fff8b80ce-a867-48f7-932b-ee9efbe8f815.png",2073,1546,"UI component from Dovetail",[154],{"id":12,"title":13,"slug":49},{"slug":156,"title":157,"logo":158,"baseline":159,"categories":160},"dovetail","Dovetail","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6b47c81d-b89f-43c4-9087-0c1e1df518d7.png","Helps you with the key steps of UX research",[161,165,169,173],{"id":162,"title":163,"slug":164},8,"Design","design",{"id":166,"title":167,"slug":168},22,"Knowledge Management","knowledge-management",{"id":170,"title":171,"slug":172},35,"Feedback","feedback",{"id":174,"title":175,"slug":176},104,"User Research","user-research",{"uuid":178,"title":179,"description":180,"canonical_path":181,"image":182,"width":183,"height":184,"image_alt":185,"kind":46,"categories":186,"app":188},"9b09f8b7-cf3f-4a11-8610-332b71ba2a37","Mistral UI component","A contact form for design partners to join a community and provide input.","\u002Fexamples\u002Fapps\u002Fmistral\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7c170cc0-bbf5-43d1-9213-8a57720ec836.png",2752,1676,"UI component from Mistral",[187],{"id":12,"title":13,"slug":49},{"slug":189,"title":190,"logo":191,"baseline":192,"categories":193},"mistral","Mistral","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Febdf5e59-0539-44b6-9e33-2986c1458350.png","Frontier AI. In your hands",[194,195,198],{"id":99,"title":100,"slug":101},{"id":9,"title":196,"slug":197},"Machine learning","machine-learning",{"id":57,"title":58,"slug":59},{"uuid":200,"title":201,"description":202,"canonical_path":203,"image":204,"width":205,"height":206,"image_alt":207,"kind":46,"categories":208,"app":210},"259ac53d-cd67-4935-8fd2-da2e74acb0eb","Ona UI component","A modal form for accessing a webinar recording.","\u002Fexamples\u002Fapps\u002Fona\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F43f30133-de21-4d0c-81e8-0afc0f975a6c.png",1402,1455,"UI component from Ona",[209],{"id":12,"title":13,"slug":49},{"slug":211,"title":212,"logo":213,"baseline":214,"categories":215},"ona","Ona","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F5f04e4d2-1820-448d-8510-4d55ff185524.png","The AI software engineer you can rely on",[216,217],{"id":99,"title":100,"slug":101},{"id":57,"title":58,"slug":59},{"uuid":219,"title":220,"description":221,"canonical_path":222,"image":223,"width":224,"height":225,"image_alt":226,"kind":46,"categories":227,"app":229},"72e60ccd-86f2-4b68-8abd-777e749f4a57","Cache UI component","A landing page for 'The Advisor's Guide to Exchange Funds' with a lead capture form and a preview of the guide's content.","\u002Fexamples\u002Fapps\u002Fcache\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F72a79d62-39db-4ffb-bdb2-af21a9bdb71d.png",2559,816,"UI component from Cache",[228],{"id":12,"title":13,"slug":49},{"slug":230,"title":231,"logo":232,"baseline":233,"categories":234},"cache","Cache","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F58f7e879-0d35-4ce9-9cef-ccb2733b6520.png","A modern brokerage for your large stock positions",[235],{"id":236,"title":237,"slug":238},36,"Finance","finance",{"uuid":240,"title":241,"description":242,"canonical_path":243,"image":244,"width":245,"height":246,"image_alt":247,"kind":46,"categories":248,"app":250},"c44e510f-bceb-4e6a-9ac9-180709065502","Fyxer UI component","A contact form for booking a call with an AI expert, featuring fields for personal and company information, and an offer for a free product masterclass.","\u002Fexamples\u002Fapps\u002Ffyxer\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe113e2ce-b083-4b64-8e51-0ee32f8d3fcb.png",1444,1557,"UI component from Fyxer",[249],{"id":12,"title":13,"slug":49},{"slug":251,"title":252,"logo":253,"baseline":254,"categories":255},"fyxer","Fyxer","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6c4767fa-eedd-41af-a293-2f6900ffa570.png","AI that writes your email replies",[256,257,258],{"id":57,"title":58,"slug":59},{"id":141,"title":142,"slug":143},{"id":259,"title":260,"slug":261},30,"Productivity","productivity",{"uuid":263,"title":264,"description":265,"canonical_path":266,"image":267,"width":268,"height":269,"image_alt":270,"kind":46,"categories":271,"app":273},"f0600f8e-e413-4b30-9430-a3723130ae51","Kinsta UI component","A contact form with multiple input fields.","\u002Fexamples\u002Fapps\u002Fkinsta\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F25c926dc-9163-4c63-afe7-f2a2251fc412.png",1472,1776,"UI component from Kinsta",[272],{"id":12,"title":13,"slug":49},{"slug":274,"title":275,"logo":276,"baseline":277,"categories":278},"kinsta","Kinsta","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F1206afb6-473b-4871-9c3a-5ae09d868502.png","Simply better hosting for WordPress",[279,283],{"id":280,"title":281,"slug":282},7,"Web Development","web-development",{"id":99,"title":100,"slug":101},{"uuid":285,"title":286,"description":287,"canonical_path":288,"image":289,"width":290,"height":291,"image_alt":292,"kind":46,"categories":293,"app":295},"78206022-e7ff-4981-8a0c-f5b3f521a78f","Grammarly UI component","Payment details modal for a free trial.","\u002Fexamples\u002Fapps\u002Fgrammarly\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F224ffdc6-84a2-4abe-862b-47c46ac7981d.png",1957,1734,"UI component from Grammarly",[294],{"id":12,"title":13,"slug":49},{"slug":296,"title":297,"logo":298,"baseline":299,"categories":300},"grammarly","Grammarly","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fgrammarly-bbef73ad.png","Free online writing assistant",[301,305],{"id":302,"title":303,"slug":304},59,"Writing tools","writing-tools",{"id":57,"title":58,"slug":59},{"uuid":307,"title":308,"description":309,"canonical_path":310,"image":311,"width":312,"height":313,"image_alt":314,"kind":46,"categories":315,"app":317},"fbbad0c7-6a9b-4829-966e-0897ef262051","Travelperk UI component","A modal for searching trains.","\u002Fexamples\u002Fapps\u002Ftravelperk\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F107a480c-aea8-4e68-9bfe-8bc0abb44144.png",3024,850,"UI component from Travelperk",[316],{"id":12,"title":13,"slug":49},{"slug":318,"title":319,"logo":320,"baseline":321,"categories":322},"travelperk","Travelperk","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftravelperk-tuhcpuzp.png","Travel for work made simpler and smarter",[323,327,331,332],{"id":324,"title":325,"slug":326},5,"Travel","travel",{"id":328,"title":329,"slug":330},26,"Events","events",{"id":236,"title":237,"slug":238},{"id":333,"title":334,"slug":335},56,"Accounting","accounting",[],[338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383],{"label":339,"to":340},"Product Page","\u002Fexamples\u002Fpages\u002Fproduct-page",{"label":342,"to":343},"Use Case Page","\u002Fexamples\u002Fpages\u002Fuse-case-page",{"label":345,"to":346},"Edit","\u002Fexamples\u002Fscreens\u002Fedit",{"label":348,"to":349},"Community Page","\u002Fexamples\u002Fpages\u002Fcommunity-page",{"label":351,"to":352},"Poolside design examples","\u002Fexamples\u002Fapps\u002Fpoolside",{"label":354,"to":355},"Aboard design examples","\u002Fexamples\u002Fapps\u002Faboard",{"label":357,"to":358},"Liveblocks design examples","\u002Fexamples\u002Fapps\u002Fliveblocks",{"label":360,"to":361},"Bird design examples","\u002Fexamples\u002Fapps\u002Fbird",{"label":363,"to":364},"Dovetail design examples","\u002Fexamples\u002Fapps\u002Fdovetail",{"label":366,"to":367},"Mistral design examples","\u002Fexamples\u002Fapps\u002Fmistral",{"label":369,"to":370},"Ona design examples","\u002Fexamples\u002Fapps\u002Fona",{"label":372,"to":373},"Cache design examples","\u002Fexamples\u002Fapps\u002Fcache",{"label":375,"to":376},"Fyxer design examples","\u002Fexamples\u002Fapps\u002Ffyxer",{"label":378,"to":379},"Kinsta design examples","\u002Fexamples\u002Fapps\u002Fkinsta",{"label":381,"to":382},"Grammarly design examples","\u002Fexamples\u002Fapps\u002Fgrammarly",{"label":384,"to":385},"Travelperk design examples","\u002Fexamples\u002Fapps\u002Ftravelperk",{"published_at":387,"updated_at":388},"2022-08-22T09:27:19.000Z","2026-09-17T10:44:16.000Z"]