They’re not sexy. They’re not styled. They’re the browser defaults.
No web designer will include them in their portfolio without restyling them. But they’ve probably used them at some point. I’m talking default checkboxes, radios, dropdowns and more…
In the past, I’ve used them on forms, white label products (that had little additional styling) and couple of fugly CMSs. And if you’re like me, I know you want to get the nit-picky-details jussst right.
This comprehensive Sketch Library that will help you the next time your faced with similar design challenges.
ZIP File contains
Native Web Components.sketch
Demo - Full Flow.mp4
Take a lookYou can see a detailed overview of whats included in the files on Medium. I've posted a few of these on Dribbble too.
Need to resize? No problem! You can drag and everything will stay perfectly scaled. All the layout option have been set using Sketch's Resizing properties so they'll speak really well to other apps like InVision, Marvel or Zeplin.
No plugins needed
You wont need to install anything else, other than Sketch, to get this up and running. However, if you do have the Paddy plugin, your buttons will resize automatically.
As simple as possible
If you add Native Web Components.sketch as a Sketch Library, you can simply copy and paste every asset straight from the demo file. No need to dig through the symbols dropdown trying to find what you need.
Got questions? Or Suggestions for improvements?
Get in touch via twitter and I’ll be happy to help you out.
Right now this is designed with Mac OS and Google Chrome in mind. I came to this conclusion as Sketch is Mac only and Chrome is the most popular browser, also there is very little difference between Chrome and Safari as they both use WebKit.
If you would find it useful to see more operating systems or browsers added, reach out, I'll be happy to consider them.
If you do find this resource useful and it saves you a lot of time, please show your support and consider buying me a ☕️or a 🍺by donating a few bucks! It will encourage me to keep the library up-to-date and think of more useful things to give to you for free.