Password TextField for iOS

Almost every application with login function will contain textfield for inputting the password. As we all know every password textfield’s text is to be secured. For the ease of users it would be really great if users can see what they just typed in the password field with ease if they want to.

Today we will be building a subclass of UITextField to make a UITextfield object ready for the password input in just a few lines of code or just by assigning the class through Storyboard.

Step 1: Let us first create a new file.

Add new File in Xcode

Or you could just press Command + N.

It must be a Swift file so select Swift File option and click Next.

Adding new Swift File in Xcode

Give a file name to Swift file. I will name it PasswordTextField.

Step 2: Firstly import UIKit. Define a class with a class name.

import UIKit
class PasswordTextField: UITextField {
}

Step 3: Override the initializer with CGRect argument of UITextField and call the initializer of UITextField class which is our super class.

override init(frame: CGRect) {
    super.init(frame: frame)
}

Also if you want to use this class for Storyboard we also require to have another initializer in our class.

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}

The first initializer will be called if we create a PasswordTextField object using an initializer with a CGRect argument and the second initializer will be called if we assign PasswordTextField class to a UITextField from storyboard.

Before moving to further steps lets make a function to do all the setup required. The most important thing in a textfield that accepts password is securing its input. Let’s do it.

private func setup() {
    self.isSecureTextEntry = true
}

Step 4: Create a button for the user to tap in order to show/hide his password input.

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
button.setImage(UIImage(named: “ic_visibility_off”), for: .normal)
button.setImage(UIImage(named: “ic_visibility_on”), for: .selected)

The above code creates a button with an image for normal control state and different image for selected control state.

Step 5: Make the button to show and hide the input in PasswordTextField.

button.addTarget(self, action: #selector(showHidePassword(_:)), for: .touchUpInside)
@objc private func showHidePassword(_ sender: UIButton) {
    sender.isSelected = !sender.isSelected
    self.isSecureTextEntry = !sender.isSelected
}

Step 6: Place the button in right side of PasswordTextField.

rightView = button
rightViewMode = .always

The full source code:

PasswordTextField.swift

Step 7: Using PasswordTextField class.

Through Code:

let passwordTextField = PasswordTextField(frame: CGRect(x: 0, y: 0, width: 400, height: 50))
view.addSubview(passwordTextField)

Through Storyboard:

Assign PasswordTextField to UITextField on Storyboard.

Boom! Now you have your own PasswordTextField class which can be used easily to make a normal UITextField a PasswordTextField.

Real Word Usage

Password TextField in Change Password