If your website enables users to have their own accounts, then passwords are an important part of both security and the UI. You’ll certainly want users to adopt strong passwords to make things more difficult on hackers. But there are also some little touches you can add to a password field that improve usability.
Plus, you wouldn’t want to treat your login area as an afterthought.
There are a number of password-related snippets worth checking out. Below, you’ll find a combination of aesthetically pleasing, unique, and functional snippets that range from simple password fields to utilities that will generate secure passwords for your users.
Checking Password Requirements by Tony Montemorano
One of the most frustrating situations for a user is when a password isn’t strong enough, but it isn’t clear what they need to do in order to meet the requirement.
Hide & Show Me Password by Bryan Miner
When we’re creating complicated passwords, it can be quite useful to see what it is we’re typing. So often, fields that offer this feature do so with an eyeball icon or some other non-verbal method.
What’s nice about this particular login form is that it actually says “Show Password” on the password field toggle. It’s never a bad idea to make things as obvious as possible.
The Password Genie by Nour Saud
There are plenty of choices out there if you want to randomly generate a password. But what makes this Vue.js example so cool is that you have a user-friendly options panel for selecting the length, number of digits, and symbols.
There’s also a real-time strength meter, the ability to generate password after password, and click-to-copy functionality. What else could you possibly need?
Wrong Password? Get Outta Here by Amit Soni
Micro-interactions are sort of a big deal these days, and this password field uses them in a creative manner. Enter in the wrong password, and the lock icon swings, pendulum-like, and “kicks” the invalid entry away. It’s mainly for fun, but interesting nonetheless.
Create Random Passwords by Tobias Bogliolo
If you’re in a situation where you need to generate several passwords, you will love the functionality of this example.
Set the number of passwords you want to generate, how many characters they should be and even list the characters you want the generator to use. And, oh yeah, you can even save your password list as a text file or print it out. What a time saver!
Confirm & Validate Password by Nodws
In scenarios where a user is either registering or changing their password, adding a second confirmation field is pretty standard practice.
This form takes it a step further by adding several features, including the ability to show/hide the input text, a strength meter and a check to make sure the password in both fields match. The only suggestion here would be to also display the requirements for a “strong” password.
Super Secret Password Generator by JP Nothard
When you combine interesting design and solid functionality, you’re on to something good. This password generator offers up a great mix.
It can be configured by clicking the various icons at the bottom of the form (the features do work in the example) – that’s the functionality portion. The UI is also very slick, using animation to make the whole experience feel more interactive.
Just Like the Movies by Marco Fugaro
This last selection is purely for entertainment purposes. This snippet is a tribute to all of those movies and television shows that have made password cracking look like a futuristic endeavor.
To use it, just click as the random characters pass by – once for each spot in the password. The result is a fully “cracked” password!
There you have it, a mix of password fields that can enhance usability and maybe even the security of your next project. Not to mention some interesting password generation tools that can help you create better passwords and do so in short order. Now, just don’t share them with anyone!