OTPFieldView

One Time Password View for iOS. Built in Swift 5

Preview

Installation

CocoaPods

Add the following line to your Podfile:

pod 'OTPFieldView'

Then run the following in the same directory as your Podfile:

pod install

Usage

Code

@IBOutlet var otpTextFieldView: OTPFieldView!

func setupOtpView(){
        self.otpTextFieldView.fieldsCount = 5
        self.otpTextFieldView.fieldBorderWidth = 2
        self.otpTextFieldView.defaultBorderColor = UIColor.black
        self.otpTextFieldView.filledBorderColor = UIColor.green
        self.otpTextFieldView.cursorColor = UIColor.red
        self.otpTextFieldView.displayType = .underlinedBottom
        self.otpTextFieldView.fieldSize = 40
        self.otpTextFieldView.separatorSpace = 8
        self.otpTextFieldView.shouldAllowIntermediateEditing = false
        self.otpTextFieldView.delegate = self
        self.otpTextFieldView.initializeUI()
    }

The becomeFirstResponderAtIndex property sets the pinField at the specified index as the first responder. The isContentTypeOneTimeCode property sets the contentType of the first pinField to .oneTimeCode to leverage the iOS 12 feature where the passcode is directly fetched from the messages.

Styles

enum DisplayType: Int {
    case circular
    case roundedCorner
    case square
    case diamond
    case underlinedBottom
}

Delegate Methods

extension OtpViewController: OTPFieldViewDelegate {
    func hasEnteredAllOTP(hasEnteredAll hasEntered: Bool) -> Bool {
        print("Has entered all OTP? \(hasEntered)")
        return false
    }
    
    func shouldBecomeFirstResponderForOTP(otpTextFieldIndex index: Int) -> Bool {
        return true
    }
    
    func enteredOTP(otp otpString: String) {
        print("OTPString: \(otpString)")
    }
}

• hasEnteredAllOTP(): Returns true when all text Fields are full.
• shouldBecomeFirstResponderForOTP(): Show keyboard automatically.
• enteredOTP(): Get entered pin.

Properties

• .displayType: Display type for Text Field.

• .fieldsCount: Length of OTP.

• .otpInputType: Input type for Text Field : numeric, alphabet, alphaNumeric.

• .fieldFont: Font for Text Field.

• .secureEntry: Shows • instead of text.

• .hideEnteredText: Hides the text.

• .requireCursor: Shows/Hides cursor.

• .cursorColor: Color for Cursor.

• .fieldSize: Size of Text Field.

• .separatorSpace: Space between Text Fields.

• .fieldBorderWidth: Border width for Text Fields.

• .shouldAllowIntermediateEditing: Allow to edit from middle.

• .defaultBackgroundColor: Empty text field background color.

• .filledBackgroundColor: Filled text field background color.

• .defaultBorderColor: Empty text field border color.

• .filledBorderColor: Filled text field border color.

• .errorBorderColor: Error text field border color.

• .delegate: delegate.

License

OTPFieldView is available under the MIT license. See LICENSE for details.