Skip to content


Repository files navigation


CI Status Version License Platform

screenshot example


  • Set the length of input required
  • Set the size of input indicators
  • Set colours for background and borders of input indicators for idle and completed states
  • Set the border size of input indicators
  • Set custom font and text color for input previews
  • Check the input and completion of input via WWPasscodeInputDelegate


To run the example project, clone the repo, and run pod install from the Example directory first.


  • iOS 9.3+
  • Xcode 10.0+
  • Swift 4.2+



To integrate WWPasscodeInput into your Xcode project using CocoaPods, specify it in your Podfile:

pod 'WWPasscodeInput'


Download and add WWPasscodeInput.swift to your project.


Quick Start

Example using autolayout constraints.

import WWPasscodeInput

class MyViewController: UIViewController {

    override func viewDidLoad() {

        let passcodeField = WWPasscodeInput()
        passcodeField.translatesAutoresizingMaskIntoConstraints = false
        let horizontalConstraint = NSLayoutConstraint(item: passcodeField, attribute: NSLayoutConstraint.Attribute.centerX, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.centerX, multiplier: 1, constant: 0)
        let verticalConstraint = NSLayoutConstraint(item: passcodeField, attribute: NSLayoutConstraint.Attribute.centerY, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.centerY, multiplier: 1, constant: 0)
        view.addConstraints([horizontalConstraint, verticalConstraint])



Handle input changes through the WWPasscodeInputDelegate by setting your instance delegate and implementing the passcodeInputDidChangeInput method as labelled below.

protocol WWPasscodeInputDelegate {
    func passcodeInputDidChangeInput(passcodeInput:WWPasscodeInput, completed:Bool, value:String?)


WWPasscodeInput contains the ability to customise a number of properties detailed below.

Customise the font of the text that appears by using the font property. The label itself will centralise on the marker it represents.

The textColor of the label can be updated as required.

Set the character count of the WWPasscodeInput via the passcodeLimit property.

Adjust the size of the markers via the markerRadius property. It is also possible to update the border of the marker via markerBorderWidth.

To adjust the colour values of the markers in WWPasscodeInput you can update markerColour, markerOutlineColour, completedMarkerColour and completedMarkerOutlineColour where the completed prefix is used to identify the state of the marker once it's input has been completed.


Nicholas Wood - / @thewhitewood


WWPasscodeInput is available under the MIT license. See the LICENSE file for more info.