Swiftpack.co - Package - Skyscanner/SkyFloatingLabelTextField


Build Status Coverage Status Pod Platform Pod License

Pod Version Carthage compatible Documentation Readme Score

SkyFloatingLabelTextField is a beautiful, flexible and customizable implementation of the space saving "Float Label Pattern". This design enables adding context to input fields that are visible at the time of typing, while minimizing the additional space used to display this additional context. This component is used in the Skyscanner TravelPro iOS application in several places, like when searching for flights.

On top of implementing the space-saving floating title, the component also supports using iconography, RTL text support (e.g. Arabic & Hebrew), various states (error, selected, highlighted states), and is very much customizable and extensible.


Up until version 1.2 Swift 2.2 and 2.3 compatible (and there is a Swift 2.3 branch in case you need it). From version 2.0 onwards only compatible with Swift 3. Please be mindful of the version you're using.


To start using the component add it to your project using CocoaPods, Carthage or manually as per the Installation section.

The UI component can be used via the SkyFloatingLabelTextField class. To use icons on the right hand side, use the SkyFloatingLabelTextFieldWithIcon class. This control can be used very similar to UITextField - both from Interface Builder, or from code.

To create an instance of the class, use Interface builder, or do it from code. This example will create the following textbox with the placeholder and title:

let textField = SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 200, height: 45))
textField.placeholder = "Name"
textField.title = "Your full name"


To customize the colors of the textfield, set a few properties - either from code, or from Interface builder. To use a textfield with an icon, utilize the SkyFloatingLabelTextFieldWithIcon class (and bundle the font class with your app). This example will change colors for the textfield on the right:

let lightGreyColor = UIColor(red: 197/255, green: 205/255, blue: 205/255, alpha: 1.0)
let darkGreyColor = UIColor(red: 52/255, green: 42/255, blue: 61/255, alpha: 1.0)
let overcastBlueColor = UIColor(red: 0, green: 187/255, blue: 204/255, alpha: 1.0)

let textField1 = SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 120, height: 45))
textField1.placeholder = "First name"
textField1.title = "Given name"

let textField2 = SkyFloatingLabelTextField(frame: CGRect(x: 150, y: 10, width: 120, height: 45))
textField2.placeholder = "Last name"
textField2.title = "Family name"

textField2.tintColor = overcastBlueColor // the color of the blinking cursor
textField2.textColor = darkGreyColor
textField2.lineColor = lightGreyColor
textField2.selectedTitleColor = overcastBlueColor
textField2.selectedLineColor = overcastBlueColor

textField2.lineHeight = 1.0 // bottom line height in points
textField2.selectedLineHeight = 2.0

Icons and fonts

Use the SkyFloatingLabelTextFieldWithIcon field to display icons next to the textfields. You have the option of using a font or an image as the icon by setting the iconType property (Default = IconType.font). If using an image as icon, you will have to set the iconImage property. If using a font as icon, you will have to set the iconFont property and bundle your icon with your app (if it's not a built in one). Icons can be rotated and more precise positioning is also supported:

Using a font

let overcastBlueColor = UIColor(red: 0, green: 187/255, blue: 204/255, alpha: 1.0)
let textFieldFrame = CGRect(x: 150, y: 10, width: 120, height: 45)

let textField1 = SkyFloatingLabelTextFieldWithIcon(frame: textFieldFrame, iconType: .font)
textField1.placeholder = "Departure"
textField1.title = "Flying from"
textField1.iconFont = UIFont(name: "FontAwesome", size: 15)
textField1.iconText = "\u{f072}" // plane icon as per https://fortawesome.github.io/Font-Awesome/cheatsheet/

let textField2 = SkyFloatingLabelTextFieldWithIcon(frame: textFieldFrame)
textField2.placeholder = "Arrival"
textField2.title = "Flying to"
textField2.tintColor = overcastBlueColor
textField2.selectedTitleColor = overcastBlueColor
textField2.selectedLineColor = overcastBlueColor

// Set icon properties
textField2.iconType = .font
textField2.iconColor = UIColor.lightGrayColor()
textField2.selectedIconColor = overcastBlueColor
textField2.iconFont = UIFont(name: "FontAwesome", size: 15)
textField2.iconText = "\u{f072}" // plane icon as per https://fortawesome.github.io/Font-Awesome/cheatsheet/
textField2.iconMarginBottom = 4.0 // more precise icon positioning. Usually needed to tweak on a per font basis.
textField2.iconRotationDegrees = 90 // rotate it 90 degrees
textField2.iconMarginLeft = 2.0

Using an image

let textFieldframe = CGRect(x: 150, y: 10, width: 120, height: 45)

let textField1 = SkyFloatingLabelTextFieldWithIcon(frame: textFieldframe, iconType: .image)
textField1.placeholder = "Departure"
textField1.title = "Flying from"
textField1.iconImage = UIImage(imageLiteralResourceName: "PlaneIcon")

Error state and delegates

The textfield supports displaying an error state - this can be useful for example when validating fields on the fly. When the errorMessage property is set on the control, then the control is highlighted with the color set in the errorColor property.

To get notified of different events happening on the textfield - such as the text changing, editing starting or ending - just set the func addTarget(_ target: Any?, action: Selector, for controlEvents: UIControl.Event) with the.editingChanged. also can set the delegate property to a class implementing the standard UITextFieldDelegate protocol:

class MyViewController: UIViewController, UITextFieldDelegate {
    override func viewDidLoad() {
        let textField1 = SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 120, height: 45))
        textField1.placeholder = "Email"
        textField1.title = "Email address"
        textField1.errorColor = UIColor.redColor()
        textField1.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)
    // This will notify us when something has changed on the textfield
    @objc func textFieldDidChange(_ textfield: UITextField) {
        if let text = textfield.text {
            if let floatingLabelTextField = textField as? SkyFloatingLabelTextField {
                if(text.characters.count < 3 || !text.containsString("@")) {
                    floatingLabelTextField.errorMessage = "Invalid email"
                else {
                    // The error message will only disappear when we reset it to nil or empty string
                    floatingLabelTextField.errorMessage = ""

Disabled state

The textfield also supports displaying a disabled state. When the isEnabled property is set on the control, then the control is highlighted with the color set in the disabledColor property.

    textField.disabledColor = disabledColor
    textField.isEnabled = false

RTL language support

The component automatically detects the language writing direction. When the phone has a RTL language set (e.g. Arabic or Hebrew), then it automatically adjusts to support this style.

Alternatively, set the isLTRLanguage property to manually change the writing direction.

Further customizing the control by subclassing

The control was designed to allow further customization in subclasses. The control itself inherits from UITextField, so the standard overrides from there can all be used. A few other notable customization hooks via overriding are:

  • updateColors: override this method to customize colors whenever the state of the control changes
  • Layout overrides:
    • titleLabelRectForBounds(bounds:CGRect, editing:Bool): override to change the bounds of the top title placeholder view
    • textRectForBounds(bounds: CGRect): override to change the bounds of the control (inherited from UITextField)
    • editingRectForBounds(bounds: CGRect): override to change the bounds of the control when editing / selected (inherited from UITextField)
    • placeholderRectForBounds(bounds: CGRect): override to change the bounds of the placeholder view
    • lineViewRectForBounds(bounds:CGRect, editing:Bool): override to change the bounds of the bottom line view


See the SkyFloatingLabelTextField documentation on CocoaDocs.org for the full documentation.



The control is available through CocoaPods. CocoaPods can be installed using Ruby gems:

$ gem install cocoapods

Then simply add SkyFloatingLabelTextField to your Podfile:

pod 'SkyFloatingLabelTextField', '~> 3.0'

Lastly, let CocoaPods fetch the latest version of the component by running:

$ pod update
Integrating into Objective C projects

When integrating the component into an Objective C project, in the Podfile add use_frameworks!. For example as shown in SkyFloatingLabelTextFieldObjectiveCExample:


target 'SkyFloatingLabelTextFieldObjectiveCExample' do
  pod 'SkyFloatingLabelTextField', '~> 3.0'

Then to use the component in your code, add the following line to your .h or .m files:

@import SkyFloatingLabelTextField;


The component supports Carthage. Start by making sure you have the latest version of Carthage installed. Using Homebrew run this:

$ brew update
$ brew install carthage

Then add SkyFloatingLabelTextField to your Cartfile:

github "Skyscanner/SkyFloatingLabelTextField"

Finally, add the framework to the Xcode project of your App. Link the framework to your App and copy it to the App’s Frameworks directory via the “Build Phases” section.


You can download the latest files from our Releases page. After doing so, copy the files in the Sources folder to your project.


We welcome all contributions. Please read this guide before opening issues or submitting pull requests, as well as how and who to contact with questions.


The original component was built by Daniel Langh, Gergely Orosz and Raimon Laupente. Notable contributions by Shai Shamir (RTL language support).

Credits for the original design, and improving it with iconography to Matt D. Smith (@mds).


  • Can I use it in Objective C projects?

    Of course! Please see the Integrating-into-Objective-C-projects section on how to integrate the component via CocoaPods.

  • Does the control work well with auto layout? What about using it programmatically?

    The control was built to support both use cases. It plays nicely with autolayout. As the control is a subclass of UITextField, overriding textRectForBounds(bounds:) or editingRectForBounds(bounds:) is always an option. Alternatively, overriding intrinsiccontentsize is also another possibility.

  • How can I remove the line from the bottom of the textfield?

    Set lineHeight and selectedLineHeight to 0, and the line won't be displayed.

  • I'd like to validate the textfield using the errorMessage. How can I re-validate text is typed in the textfield?

    Using a delegate implement the textField(textField:,range:string:) method. This method fires whenever the text is changed - do the validation here. Alternatively, using subclassing you can also override the becomeFirstResponder method to e.g. clear the text or error message when the textfield is selected.


Stars: 3538


Used By

Total: 0


Swift 5 and SPM - 2019-12-05 12:41:38

  • A new tag format for release has been introduced to be compatible with Swift Package Manager(SPM). The new format does not include the v prefix in tag names. This will be the case for all tags going forward, previous v prefix tags remain in place and new tags without the v prefix has been pushed for these commits too.
  • Added support for Swift Package Manager #296. Thanks to acecilia.
  • Added support for Swift 5 #290. Thanks to jessemx109.

v3.6.0 - 2018-09-20 15:41:09

  • Added support for Swift 4.2 and Xcode 10. See #239.

v3.5.2 - 2018-08-27 14:34:12

  • Fixed crash when overriding certain properties #216. Thanks to alextov.
  • Expose errorMessage to Objective-C and Storyboard #218. Thanks to niveuseverto.

v3.5.1 - 2018-05-29 08:43:54

  • Prevent potential crash when self.font is nil. This might cause the component to render incorrectly, but it will not crash which is preferable. See #186

v3.5.0 - 2018-05-28 16:07:29

  • Marked isLTRLanguage with @objc so it can be set from Objective-C code #200. Thanks to behdad-keynejad
  • Added support for different colors for line, title, text when error is set #208. Thanks to InbarSletean

Use localizedUppercase for titleFormatter - 2018-03-27 08:52:51

  • Use localizedUppercase for titleFormatter by default when available. Thanks to canaksoy.

v3.3.0 - 2017-11-01 10:19:56

  • Added support for a disabled state of the field #177. Big thanks to kanjanaSi.

v3.2.0 - 2017-07-04 09:04:54

  • Fixed editing rect size when clear button is present to no overlap #148
  • Added titleFont as open var to set another font in titleLabel #141. Thanks to @rabenson and @rubenadlm.

v3.1.0 - 2017-04-19 08:35:18


  • Made isLTRLanguage open so it can actually be set by users #121.
  • Silence warnings due to M_PI being deprecated in Xcode 8.3 #116. Thanks to @z3bi.
  • Adds UIAppearance support #118. Thanks to mwfire.
  • Fix for RTL issue while editing texts #126. Thanks to @mehrdadmaskull

No Functional Change

  • Added swiftlint and cleaned up the source code to conform with it #125. Thanks to @moogle19

v3.0.0 - 2017-03-07 11:21:17


Change implementation of amimation callbacks to include boolean completed flag.


textfield.setTitleVisible(false, animated: true) {
	// Perform callback actions


textfield.setTitleVisible(false, animated: true) { completed in
	// Perform callback actions using completed flag

See (#112)[https://github.com/Skyscanner/SkyFloatingLabelTextField/pull/112]

v2.0.1 - 2017-01-16 23:04:51

  • Added @discardableResult to becomeFirstResponder and resignFirstResponder. This silences Xcode warnings about unused results of those functions and brings the implementation closer to the iOS API #98. Thanks to bennokress
  • Disable GCC_GENERATE_TEST_COVERAGE_FILES and GCC_INSTRUMENT_PROGRAM_FLOW_ARCS in release configs. This was causing rejections when submitting to Apple when the library is integrated manually or with Carthage #97. Thanks to vytautasgimbutas

v2.0.0 Swift 3 support 🎉 - 2016-12-07 15:04:04

Fix release for CocoaPods - 2016-11-30 10:45:39

The tag pointed to in .podspec was not updated in the 1.3 release causing it to still point to 1.2.1 instead of 1.3. This release fixes that and correctly points the podspec to the right git tag.

V1.3 Swift 2.3 support - 2016-11-30 09:39:35

  • Adds support for Swift 2.3. Thanks to okipol88. See #69
  • Adds support for iOS 7. Thanks to acecilia. See #51

v1.2.1 - 2016-05-19 17:53:18

Bugfix: title was blinking when tapping the textfield.

v1.2.0 - 2016-04-21 21:27:59

  • Added RTL language support
  • Changed the behaviour of errorMessage, removing unnecessary business logic.
    • Before this change there was some "hidden" business logic around the resetting of errorMessage, namely:
      • Whenever the control was selected by a user, it got cleared (becomeFirstResponder invoked)
      • Whenever the text changed, it also got reset (when textField(textField:,range:string:) was invoked)
    • After this change what's different:
      • The errorMessage is no longer reset by any text or focus changes. If a developer sets this message, the error will be displayed, until this property is cleared. To implement the previous functionality, just subscribe to the textField(textField:,range:string:) event on the delegate
      • As a side effect of this, the workaround of double-invoking textField(textField:,range:string:) has been removed, fixing the bug raised by this Issue

v1.1.1 - 2016-04-06 06:43:48

  • Bugfix: setting the error message via the textField?(shouldChangeCharactersInRange:replacementString:) method is now possible
  • Added example on how to use the control from Objective C

v1.1 - 2016-04-04 11:38:39

  • Changed the control to inherit from the UITextField class (previously the control inherited from UIControl)
  • The delegate to use with the textfield is now the UITextFieldDelegate (removed the delegate:SkyFloatingLabelTextFieldDelegate class)
  • Removed placeHolderLabel, textField and hasText properties from SkyFloatingLabelTextField class
  • Removed textRectForBounds(bounds: CGRect) and placeholderLabelRectForBounds(bounds:CGRect) methods from SkyFloatingLabelTextField
  • The above methods have been replaced with the UITextfield methods editingRectForBounds(bounds: CGRect) and placeholderRectForBounds(bounds: CGRect) on SkyFloatingLabelTextField
  • Added placeholderFont, editingOrSelected properties to SkyFloatingLabelTextField class

v1.0.6 - 2016-03-11 15:30:14

Removed the hideKeyboardWhenSelected property. This property seemed too specific. To hide the keyboard when selecting a field, an alternative workaround is to set the textField.inputView property to an empty view.

v1.0.5 - 2016-03-10 17:09:29

  • Added the hideKeyboardWhenSelected property
  • Bugfix: When invoking becomeFirstResponder on a textField that was not yet visible, the keyboard did not show up.

v1.0.4 - 2016-03-01 19:02:04

v1.0.3 - 2016-03-01 18:17:45

v1.0.2 - 2016-03-01 18:16:01

v0.0.1 - 2016-03-01 18:05:14

Added support for Swift package manager

v1.0.0 - 2016-03-01 16:54:11

v0.2.2 - 2016-02-28 16:09:26

v0.2.1 - 2016-02-27 21:20:18

v0.2.0 - 2016-02-27 21:13:12

v0.1.1 - 2016-02-14 16:52:16

v0.1.0 - 2016-02-14 16:49:05