Guidebook Engineering Blog

Show/Hide Password Text View—In Swift!


Getting the UX around user sign up is important. That’s why we built our own password visibility toggle, and we’re open sourcing it so you can use it too.

ShowHidePasswordTextField

The code is pretty simple. It’s all in Swift (yay!) and boils down to two classes: PasswordToggleVisibilityView and HideShowPasswordTextField.

The former, PasswordToggleVisibilityView, is a simple UIView with a button and an optional checkbox image. The button toggles it’s background image between “open eye” and “closed eye” states, and the checkbox is configurable with a delegate to show the user when the password is “valid”.

HideShowPasswordTextField is a UITextField subclass that creates the PasswordToggleVisibilityView as it’s rightView and configures the view based on the state of secureTextEntry. secureTextEntry is a property on UITextField that determines whether the text shows up as plaintext, or as “secure” password characters. This view specifically handles visual bugs that may occur when toggling between secureTextEntry states.1

Checkout README.md in the repo to see how to use it. It’s pretty simple.

Let us know if you use it within your app or if you have any questions on implementation. Look for this to be out in a new version of the Guidebook app in the coming weeks.

View the project on Github.


1 secureTextEntry clearing text, secureTextEntry incorrect Font, rightView wonky animation


Share on Twitter View on Github