DOCSEARCHbyAlgolia
Submit Docs

CHIOTPField

repository·master·Indexed 43 days ago

https://github.com/chililabs/chiotpfield

A collection of specialized UITextField subclasses for iOS 10.0+ and Swift 5 designed for One-Time Passwords (OTP), SMS codes, and PIN codes. It supports automatic SMS code insertion and provides four distinct visual styles (OTPFieldOne, OTPFieldTwo, OTPFieldThree, and OTPFieldFour) with customizable properties for digit boxes, borders, and colors.

Tokens
1.5K
Snippets
6
Records
7
Agent score
5%

What's inside CHIOTPField

  2. Use CHIOTPField in Storyboards or Code

    master

    Storyboards

    Drag a UITextField into your storyboard and set its class to one of the CHIOTPField variants (e.g., OTPFieldOne).

    Programmatic Usage

    Initialize the field and configure its properties like numberOfDigits and cornerRadius:

    let field = OTPFieldOne(frame: .init(x: 0, y: 0, width: 200, height: 60))
field.numberOfDigits = 4
field.cornerRadius = 4
    let field = OTPFieldOne(frame: .init(x: 0, y: 0, width: 200, height: 60))
field.numberOfDigits = 4
field.cornerRadius = 4

  3. Install CHIOTPField

    master

    CHIOTPField requires iOS 10.0+ and Swift 5. You can install it using one of the following methods:

    CocoaPods

    Add the following to your Podfile. You can install the full library or specific field types for individual page control:

    # Full library
pod 'CHIOTPField', '~> 0.1'

# Individual page control (specific field types)
pod 'CHIOTPField/One'
pod 'CHIOTPField/Two'
pod 'CHIOTPField/Three'
pod 'CHIOTPField/Four'

    Swift Package Manager

    Add the repository URL to your project dependencies:

    dependencies: [
    .package(url: "https://github.com/ChiliLabs/CHIOTPField.git", .upToNextMajor(from: "0.1"))
]

    Manual Installation

    Add the Sources folder directly to your Xcode project.

    pod 'CHIOTPField', '~> 0.1'

# individual page control
pod 'CHIOTPField/One'
pod 'CHIOTPField/Two'
pod 'CHIOTPField/Three'
pod 'CHIOTPField/Four'

  4. OTPFieldThree properties

    master

    Use OTPFieldThree for an input style featuring a bottom border and dots for entered text.

    • numberOfDigits: Int — number of boxes for digits
    • spacing: Int — spacing between digits
    • boxBackgroundColor: UIColor — background color of the box in normal state
    • borderHeight: CGFloat — bottom border height
    • borderCornerRadius: CGFloat — bottom border radius
    • dotRadius: CGFloat — dot radius when text is entered
    var numberOfDigits: Int
var spacing: Int
var boxBackgroundColor: UIColor
var borderHeight: CGFloat
var borderCornerRadius: CGFloat
var dotRadius: CGFloat

  5. OTPFieldOne properties

    master

    Use OTPFieldOne for a standard box-based OTP input. Available properties:

    • numberOfDigits: Int — number of boxes for digits
    • spacing: Int — spacing between digits
    • boxBackgroundColor: UIColor — background color of the box in normal state
    • borderColor: UIColor — border color of the box in normal state
    • cornerRadius: CGFloat — corner radius of the box
    • activeShadowColor: UIColor? — shadow color of the box in active state
    • activeShadowOpacity: CGFloat — shadow opacity of the box in active state
    • boxPlaceholder: String? — placeholder text
    • boxPlaceholderColor: UIColor? — placeholder text color
    var numberOfDigits: Int
var spacing: Int
var boxBackgroundColor: UIColor
var borderColor: UIColor
var cornerRadius: CGFloat
var activeShadowColor: UIColor?
var activeShadowOpacity: CGFloat
var boxPlaceholder: String?
var boxPlaceholderColor: UIColor?

  6. OTPFieldTwo properties

    master

    Use OTPFieldTwo for an input style that supports different background and border colors for active and filled states.

    • numberOfDigits: Int — number of boxes for digits
    • spacing: Int — spacing between digits
    • cornerRadius: CGFloat — corner radius of the box
    • boxBackgroundColor: UIColor — background color of the box in normal state
    • activeBoxBackgroundColor: UIColor — background color of the box in active state
    • filledBoxBackgroundColor: UIColor — background color of the box if a text is entered
    • borderColor: UIColor — border color of the box in normal state
    • activeBorderColor: UIColor? — border color of the box in active state
    • filledBorderColor: UIColor? — border color of the box if a text is entered
    • boxPlaceholder: String? — placeholder text
    • boxPlaceholderColor: UIColor? — placeholder text color
    var numberOfDigits: Int
var spacing: Int
var cornerRadius: CGFloat
var boxBackgroundColor: UIColor
var activeBoxBackgroundColor: UIColor
var filledBoxBackgroundColor: UIColor
var borderColor: UIColor
var activeBorderColor: UIColor?
var filledBorderColor: UIColor?
var boxPlaceholder: String?
var boxPlaceholderColor: UIColor?

  7. OTPFieldFour properties

    master

    Use OTPFieldFour for an input style with a bottom border and corner radius.

    • numberOfDigits: Int — number of boxes for digits
    • spacing: Int — spacing between digits
    • boxBackgroundColor: UIColor — background color of the box in normal state
    • borderHeight: CGFloat — bottom border height
    • borderColor: CGFloat — bottom border color
    • cornerRadius: CGFloat — corner radius of the box
    var numberOfDigits: Int
var spacing: Int
var boxBackgroundColor: UIColor
var borderHeight: CGFloat
var borderColor: CGFloat
var cornerRadius: CGFloat