All Projects → hlung → TKFormTextField

hlung / TKFormTextField

Licence: MIT license
A thin UITextField subclass with floatable placeholder and secondary text underneath for subtitle or error messages.

Programming Languages

swift
15916 projects
ruby
36898 projects - #4 most used programming language
objective c
16641 projects - #2 most used programming language

Projects that are alternatives of or similar to TKFormTextField

Sgdigittextfield
Elegant and Simplest Digit UITextField
Stars: ✭ 47 (+176.47%)
Mutual labels:  uitextfield
Closures
Swifty closures for UIKit and Foundation
Stars: ✭ 1,720 (+10017.65%)
Mutual labels:  uitextfield
Ragtextfield
Subclass of UITextField that adds an animated placeholder and an optional hint label below the text.
Stars: ✭ 227 (+1235.29%)
Mutual labels:  uitextfield
Swifticonfont
Icons fonts for iOS (Font Awesome 5, Iconic, Ionicon, Octicon, Themify, MapIcon, MaterialIcon, Foundation 3, Elegant Icon, Captain Icon)
Stars: ✭ 1,094 (+6335.29%)
Mutual labels:  uitextfield
Pincodeinputview
A input text view for entering pin code.
Stars: ✭ 108 (+535.29%)
Mutual labels:  uitextfield
Placeholders
🅿️ Define multiple placeholders for UITextField and animate their change
Stars: ✭ 190 (+1017.65%)
Mutual labels:  uitextfield
Searchtextfield
UITextField subclass with autocompletion suggestions list
Stars: ✭ 980 (+5664.71%)
Mutual labels:  uitextfield
MeasurementTextField
UITextField-based control for (NS)Measurement values input.
Stars: ✭ 16 (-5.88%)
Mutual labels:  uitextfield
Acfloatingtextfield
It is a subclass of UITextfield to Provide the floating label and customisations.
Stars: ✭ 110 (+547.06%)
Mutual labels:  uitextfield
Awesometextfieldswift
Awesome TextField is a nice and simple libriary for iOS and Mac OSX. It's highly customisable and easy-to-use tool. Works perfectly for any registration or login forms in your app.
Stars: ✭ 221 (+1200%)
Mutual labels:  uitextfield
Afviewshaker
Stars: ✭ 1,214 (+7041.18%)
Mutual labels:  uitextfield
Rsfloatinputview
A Float Input View with smooth animation and supporting icon and seperator written with Swift
Stars: ✭ 103 (+505.88%)
Mutual labels:  uitextfield
Downpicker
A lightweight DropDownList / ComboBox for iOS, written in Objective-C
Stars: ✭ 201 (+1082.35%)
Mutual labels:  uitextfield
Currencytextfield
UITextField that automatically formats text to display in the currency format
Stars: ✭ 47 (+176.47%)
Mutual labels:  uitextfield
RZColorful
NSAttributedString富文本的方法集合,以及简单优雅的使用其多种属性
Stars: ✭ 53 (+211.76%)
Mutual labels:  uitextfield
Wstagsfield
An iOS text field that represents tags, hashtags, tokens in general.
Stars: ✭ 1,013 (+5858.82%)
Mutual labels:  uitextfield
Underlinetextfield
Simple UITextfield Subclass with state
Stars: ✭ 156 (+817.65%)
Mutual labels:  uitextfield
APJTextPickerView
APJTextPickerView is simple implementation for UITextField to use as UIPickerView and UIDatePicker.
Stars: ✭ 21 (+23.53%)
Mutual labels:  uitextfield
NSJTextField
A custom textfield with the placeholder displayed on top when text entered.
Stars: ✭ 30 (+76.47%)
Mutual labels:  uitextfield
Dttextfield
DTTextField is a custom textfield with floating placeholder and error label
Stars: ✭ 213 (+1152.94%)
Mutual labels:  uitextfield

TKFormTextField

Build Status

Demo

A UITextField subclass which:

  • has a built-in UILabel below for showing an error message
  • floats placeholder up when text is entered
  • has an underline
  • you can customize unselected/selected color for the floating placeholder
  • you can customize unselected/selected color and thickness for the underline

System requirements

  • iOS 8.0 or newer
  • Swift 4.2 -> latest
  • Swift 4.0 -> 0.2.0
  • Swift 3.0 -> 0.1.6

Example

class ViewController: UIViewController {
  
  @IBOutlet weak var emailTextField: TKFormTextField!

  override func viewDidLoad() {
    super.viewDidLoad()

    // UITextField traditional properties
    self.emailTextField.placeholder = "Email"
    self.emailTextField.enablesReturnKeyAutomatically = true
    self.emailTextField.returnKeyType = .next
    self.emailTextField.clearButtonMode = .whileEditing
    self.emailTextField.placeholderFont = UIFont.systemFont(ofSize: 18)
    self.emailTextField.font = UIFont.systemFont(ofSize: 18)

    // TKFormTextField properties: floating placeholder title
    self.emailTextField.titleLabel.font = UIFont.systemFont(ofSize: 18)
    self.emailTextField.titleColor = UIColor.lightGray
    self.emailTextField.selectedTitleColor = UIColor.gray

    // TKFormTextField properties: underline
    self.emailTextField.lineColor = UIColor.gray
    self.emailTextField.selectedLineColor = UIColor.black
    
    // TKFormTextField properties: bottom error label
    self.emailTextField.errorLabel.font = UIFont.systemFont(ofSize: 18)
    self.emailTextField.errorColor = UIColor.red // this color is also used for the underline on error state

    // TKFormTextField properties: update error message
    // NOTE: Ideally you should show error on .editingDidEnd, and attempt to hide it on .editingChanged.
    // See the demo project on how I design the validation flow.
    self.emailTextField.addTarget(self, action: #selector(updateError), for: .editingChanged)
  }

  func updateError(textField: TKFormTextField) {
    guard let text = textField.text, !text.isEmpty else {
      textField.error = "Text is empty!" // to show error message in errorLabel
      return
    }
    textField.error = nil // to remove the error message
  }
}

Installation

TKFormTextField is available through CocoaPods and Carthage.

CocoaPods, add this to your Podfile:

pod "TKFormTextField"

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

Carthage

github "hlung/TKFormTextField"

Swift Package Manager

  • Star this repo and add your github account in Xcode Preferences so that it Xcode can pick it up. (See this documentation.)
  • In Xcode, go to File > Swift Packages > Add Package Dependency... Search for TKFormTextField.

Story

For text input forms, using alerts for showing error is too intrusive, makes user lost context of which field is wrong, and require another tap to dismiss. And you can only show one at a time. I think TKFormTextField is the answer to text input form UI.

Note that I am not using IBInspectable / IBDesignable because I feel it is slow and buggy. Moreover, since you usually have several text fields across the app, using code is easier to duplicate and customize.

This is inspired by https://github.com/Skyscanner/SkyFloatingLabelTextField

Used by

TODO

  • Support RTL
  • Animate error message below
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].