iOS Tutorials: Creating your own password field

SWIFT 4.2 | XCODE 10


The project today focuses on textfield where you could toggle to show or hide your password and at the same time, show the strength of your password while typing. The main focuses will be on TextField.


If you are using XCode 10, the shortcut key to your object library is CMD + SHIFT + L. We will be needing UITextFieldUILabel and UIButton. Once you have those up, create an IBOutlet for them. 

You should have an IBOutlet for UITextField, UIButton and the Label bottom the textfield as we will be modifying some of its content.


Do take note that I have created a variable of boolean to keep track of tap cycle. You will noticed that the default value is set to true.

Inside the configureView(), I have created the textfield configuration to show it as secure entry and prevent the textfield from clear when editing. I have also set a title for button as show and I would like the password strength label to be hidden.

class ViewController: UIViewController {
    @IBOutlet weak var passwordTextField: UITextField!
    @IBOutlet weak var passwordStrength: UILabel!
    @IBOutlet weak var showHideLabel: UIButton!
    var passwordVisible: Bool = true
    override func viewDidLoad() {
    func configureView(){
        passwordTextField.isSecureTextEntry = true
        passwordTextField.clearsOnBeginEditing = false
        showHideLabel.setTitle("Show", for: .normal)
        passwordStrength.isHidden = true


Create an IBAction for your button and here we are using the boolean created earlier to keep track of the click cycle. The boolean by default is true and when we clicked on the button, it will go into the true statement and execute the following command such as setting secure text entry as false, changing the title of button to hide and lastly, in order for the cycle to continue flow, I have to set the boolean to false.

Now that it is false, when the user click it again, it will execute the else statement which secure the password and set the button to show.

    @IBAction func showHide() {
        if passwordVisible {
            passwordTextField.isSecureTextEntry = false
            showHideLabel.setTitle("Hide", for: .normal)
            passwordVisible = false
        } else {
            passwordTextField.isSecureTextEntry = true
            showHideLabel.setTitle("Show", for: .normal)
            passwordVisible = true


You could implement your own logic. My logic here is pretty straight forward depending on the count of the string. In order to create this IBAction, right click text field and drag editing change to your view controller to create IBAction. 

Once you have done that, every time you type, it will start triggering the function.

    @IBAction func passwordTyped() {
        passwordStrength.isHidden = false
        if (passwordTextField.text?.count)! < 3 {
            passwordStrength.text = "Password is weak"
            passwordStrength.textColor =
        } else if (passwordTextField.text?.count)! > 8 {
            passwordStrength.text = "Password is unbreakable"
            passwordStrength.textColor =
        } else {
            passwordStrength.text = "Password is safer"
            passwordStrength.textColor = UIColor.purple

In the end, your project should look like the following and the code is uploaded to GitHub


  • Article By :
    Founder of DaddyCoding. Studied Computer Science, Information System and Information Technology at BYU-Hawaii. Currently spending most of my time researching and learning on helping to expose making iOS apps.

Random Posts

Leave a Reply

Your email address will not be published. Required fields are marked *