AEOTPTextField - A beautiful iOS OTP Text Field library, written in Swift with full access customization in UI.

Overview

▤ AEOTPTextField

If you like AEOTPTextField, give it a ★ at the top right of this page.

Overview

AEOTPTextField is a simple and easy text field control written in Swift.

  • It can be implemented in storyboard without a single line of code.
  • Highly customizable without needing to write tons of custom code.
  • Support both portrait and landscape views.

Check out the example project to see it in action!

Preview Samples

Default
With Border Without Border Clear Background

Requirements

  • Xcode 11.
  • Swift 5.
  • iOS 10 or higher.

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

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

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '10.0'
use_frameworks!

pod 'AEOTPTextField'

Then, run the following command:

$ pod install

Carthage

The integration of AEOTPTextField using Carthage will be available soon.

Swift Package Manager

The integration of AEOTPTextField using Swift Package Manager will be available soon.

Usage

Code-less Storyboard Implementation

  1. Add UITextField to your ViewController. Set the Custom Class of the UITextField to be AEOTPTextField in the Identity Inspector. Set the Module to AEOTPTextField (ignore this step if you've manually added AEOTPTextField to your project).

  2. Take an oultlet from the UITextField to your ViewController.

Code Implementation

First:

import AEOTPTextField

Setup the otpDelegate and configure the AEOTPTextField below viewDidLoad(), do something like this:

    override func viewDidLoad() {
        super.viewDidLoad()
        otpTextField.otpDelegate = self
        otpTextField.configure()
    }

To configure the AEOTPTextField with a custom slots count, do something like this:

    override func viewDidLoad() {
        super.viewDidLoad()
        otpTextField.otpDelegate = self
        otpTextField.configure(with: 4)
    }

Then, Setup the AEOTPTextFieldDelegate method. Add this extension to your ViewController, do something like this:

extension ViewController: AEOTPTextFieldDelegate {
    func didUserFinishEnter(the code: String) {
        print(code)
    }
}

You have done.

Customization

AEOTPTextField AEOTPTextField supports the following:

    // The default character placed in the text field slots
    public var otpDefaultCharacter = ""
    // The default background color of the text field slots before entering a character
    public var otpBackgroundColor: UIColor = UIColor(red: 0.949, green: 0.949, blue: 0.949, alpha: 1)
    // The default background color of the text field slots after entering a character
    public var otpFilledBackgroundColor: UIColor = UIColor(red: 0.949, green: 0.949, blue: 0.949, alpha: 1)
    // The default corner raduis of the text field slots
    public var otpCornerRaduis: CGFloat = 10
    // The default border color of the text field slots before entering a character
    public var otpDefaultBorderColor: UIColor = .clear
    // The border color of the text field slots after entering a character
    public var otpFilledBorderColor: UIColor = .darkGray
    // The default border width of the text field slots before entering a character
    public var otpDefaultBorderWidth: CGFloat = 0
    // The border width of the text field slots after entering a character
    public var otpFilledBorderWidth: CGFloat = 1
    // The default text color of the text
    public var otpTextColor: UIColor = .black
    // The default font size of the text
    public var otpFontSize: CGFloat = 14
    // The default font of the text
    public var otpFont: UIFont = UIFont.systemFont(ofSize: 14)

Example of Customization

    override func viewDidLoad() {
        super.viewDidLoad()
        otpTextField.otpDelegate = self
        otpTextField.otpFontSize = 16
        otpTextField.otpTextColor = .systemRed
        otpTextField.otpCornerRaduis = 5
        otpTextField.otpFilledBorderColor = .blue
        otpTextField.configure(with: 4)
    }
}

References

Contributed

This is an open source project, so feel free to contribute.

License

AEOTPTextField is available under the MIT license.

Author

Abdelrhman Eliwa, made this with ❤️ .

You might also like...
Transition from any SwiftUI Text view into an inline navigation bar title when the view is scrolled off-screen, as seen in Apple's TV & TestFlight iOS apps.
Transition from any SwiftUI Text view into an inline navigation bar title when the view is scrolled off-screen, as seen in Apple's TV & TestFlight iOS apps.

SwiftUI Matched Inline Title Transition from any SwiftUI Text view into an inline navigation bar title when the view is scrolled off-screen, as seen i

Declarative text styles and streamlined Dynamic Type support for iOS
Declarative text styles and streamlined Dynamic Type support for iOS

StyledText StyledText is a library that simplifies styling dynamic text in iOS applications. Instead of having to use attributed strings every time yo

SwiftUI TextEdit View - A proof-of-concept text edit component in SwiftUI & CoreText.
SwiftUI TextEdit View - A proof-of-concept text edit component in SwiftUI & CoreText.

A proof-of-concept text edit component in SwiftUI & CoreText. No UIKit, No AppKit, no UITextView/NSTextView/UITextField involved.

Render Markdown text in SwiftUI
Render Markdown text in SwiftUI

MarkdownUI MarkdownUI is a library for rendering Markdown in SwiftUI, fully compliant with the CommonMark Spec. Supported Platforms You can use the Ma

ExpandableText 😎 (SwiftUI) Expand the text with the
ExpandableText 😎 (SwiftUI) Expand the text with the "more" button

ExpandableText 😎 (SwiftUI) Expand the text with the "more" button Get Started import SwiftUI import ExpandableText struct ExpandableText_Test: View

Handles some of the base configuration to make creating a UIAlertController with text entry even easier. Plus validation!
Handles some of the base configuration to make creating a UIAlertController with text entry even easier. Plus validation!

🍅 FancyTextEntryController A simpler/easier API for adding text fields to UIAlertControllers. Not a custom view, just uses good ol' UIAlertController

Changes the color of the label text when the button is pressed and also prints hello to the console
Changes the color of the label text when the button is pressed and also prints hello to the console

MY FIRST APP App Description This app changes the color of the label text when the button is pressed and also prints "hello" to the console. App Walk-

ARAutocompleteTextView is a subclass of UITextView that automatically displays text suggestions in real-time
ARAutocompleteTextView is a subclass of UITextView that automatically displays text suggestions in real-time

ARAutocompleteTextView is a subclass of UITextView that automatically displays text suggestions in real-time. This is perfect for automatically suggesting the domain as a user types an email address, #hashtag or @alexruperez.

UITextField and UITextView subclasses with placeholders that change into floating labels when the fields are populated with text.
UITextField and UITextView subclasses with placeholders that change into floating labels when the fields are populated with text.

Deprecated Please use JVFloatLabeledTextField instead or feel free to chime in on an issue if you'd like to take over the repo. RPFloatingPlaceholders

Comments
  • SwiftUI AEOTPView Default Color

    SwiftUI AEOTPView Default Color

    Hi, Default Border color not appearing when view show a initially after when i click then they show me the default border color , But our Requirements is to show the the Border color when they load with out on click field Please fix This

    opened by waqar681 1
  • added setText method

    added setText method

    Added a method so developers can set the text themselves in the code, Example Use: When you wanna use the OTOPTextField just to show something not as a user interactive text field.

    opened by sasan-soroush 1
  • Clear Background

    Clear Background

    How to set the clear background view for the OTP textfield as I could not find any attribute of this library regarding this. If there is some attribute for this then please do let me know.

    opened by Taimoor20 1
  • `AEOTPTextField` dependency were found

    `AEOTPTextField` dependency were found

    Specs satisfying the AEOTPTextField dependency were found, but they required a higher minimum deployment target. I set 12.0 for Project deployment and Target deployment

    opened by appsgeek 0
Releases(1.2.6)
Owner
Abdelrhman Kamal
Highly experienced and skilled iOS developer with a strong current background in industrial technology. Skilled in designing, programming, and testing.
Abdelrhman Kamal
A passcode entry field for macOS similar to Apple's two-factor authentication field.

DSFPasscodeView A passcode entry field for macOS similar to Apple's two-factor authentication field. About The control is made up of multiple groups o

Darren Ford 10 Nov 12, 2022
VKPinCodeView is simple and elegant UI component for input PIN. You can easily customise appearance and get auto fill (OTP) iOS 12 feature right from the box.

Features Variable PIN length Underline, border and custom styles The error status with / without shake animation Resetting the error status manually,

Vladimir Kokhanevich 95 Nov 24, 2022
A SwiftUI TextField with a prompt (or placeholder) that floats above the text field when active or not empty. Requires iOS 15.

FloatingPromptTextField A prompt is the label in a text field that informs the user about the kind of content the text field expects. In a default Tex

Emilio Peláez 43 Nov 3, 2022
Focus text field in SwiftUI dynamically and progress through form using iOS keyboard.

Focuser Focuser allows to focus SwiftUI text fields dynamically and implements ability move go through the form using Keyboard for iOS 13 and iOS 14.

Art Technologies 118 Dec 25, 2022
Autocomplete for a text field in SwiftUI using async/await

Autocomplete for a text field in SwiftUI using async/await

Dmytro Anokhin 13 Oct 21, 2022
Currency text field formatter available for UIKit and SwiftUI 💶✏️

CurrencyText provides lightweight libraries for formating text field text as currency, available for both UIKit and SwiftUI. Its main core, the Curren

Felipe Lefèvre Marino 183 Dec 15, 2022
Text entry controls which contain a built-in title/label so that you don't have to add a separate title for each field.

FloatLabelFields Overview Installation Via Interface Builder Via Code Credits Additional References Questions Overview FloatLabelFields is the Swift i

Fahim Farook 1.2k Jan 4, 2023
Easy-to-use token field that is used in the Venmo app.

VENTokenField VENTokenField is the recipients token field that is used in the Venmo compose screen. Installation The easiest way to get started is to

Venmo 797 Dec 6, 2022
Floating-textfield-swiftui - Floating textfield swiftui: Floating field with multiple icons

floating_textfield-swiftui Hey, Guys welcome to this tutorial. In this complete

Patrick 0 Jan 2, 2022
RichTextKit is a Swift-based library for working with rich text in UIKit, AppKit and SwiftUI.

About RichTextKit RichTextKit is a Swift-based library that lets you work with rich text in UIKit, AppKit and SwiftUI. RichTextKit is under developmen

Daniel Saidi 282 Dec 28, 2022