{"id":2944,"url":"https://github.com/Skyscanner/SkyFloatingLabelTextField","last_synced_at":"2025-08-06T16:31:21.633Z","repository":{"id":3649203,"uuid":"48360584","full_name":"Skyscanner/SkyFloatingLabelTextField","owner":"Skyscanner","description":"A beautiful and flexible text field control implementation of  \"Float Label Pattern\". Written in Swift.","archived":false,"fork":false,"pushed_at":"2024-05-27T06:12:35.000Z","size":1385,"stargazers_count":4102,"open_issues_count":84,"forks_count":541,"subscribers_count":99,"default_branch":"main","last_synced_at":"2024-12-06T06:32:34.583Z","etag":null,"topics":["cocoapods","interface-builder","swift","textfield"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Skyscanner.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-12-21T08:40:49.000Z","updated_at":"2024-11-29T03:30:25.000Z","dependencies_parsed_at":"2024-06-18T10:57:17.732Z","dependency_job_id":null,"html_url":"https://github.com/Skyscanner/SkyFloatingLabelTextField","commit_stats":{"total_commits":393,"total_committers":56,"mean_commits":7.017857142857143,"dds":0.6870229007633588,"last_synced_commit":"a0750ebbc7311f3b3debf99c5e59338e854afa59"},"previous_names":[],"tags_count":66,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Skyscanner%2FSkyFloatingLabelTextField","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Skyscanner%2FSkyFloatingLabelTextField/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Skyscanner%2FSkyFloatingLabelTextField/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Skyscanner%2FSkyFloatingLabelTextField/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Skyscanner","download_url":"https://codeload.github.com/Skyscanner/SkyFloatingLabelTextField/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228671639,"owners_count":17954855,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cocoapods","interface-builder","swift","textfield"],"created_at":"2024-01-05T20:16:27.017Z","updated_at":"2024-12-09T16:31:06.896Z","avatar_url":"https://github.com/Skyscanner.png","language":"Swift","funding_links":[],"categories":["UI","Libs","TextField","Swift","Content","UI [🔝](#readme)"],"sub_categories":["TextField \u0026 TextView","UI","Text Field","Layout","Other free courses"],"readme":"# SkyFloatingLabelTextField\n\n[![Build Status](https://travis-ci.org/Skyscanner/SkyFloatingLabelTextField.svg?branch=master)](https://travis-ci.org/Skyscanner/SkyFloatingLabelTextField)\n[![Coverage Status](https://coveralls.io/repos/github/Skyscanner/SkyFloatingLabelTextField/badge.svg?branch=master)](https://coveralls.io/github/Skyscanner/SkyFloatingLabelTextField?branch=master)\n[![Pod Platform](https://img.shields.io/cocoapods/p/SkyFloatingLabelTextField.svg?style=flat)](https://cocoapods.org/pods/SkyFloatingLabelTextField)\n[![Pod License](https://img.shields.io/cocoapods/l/SkyFloatingLabelTextField.svg?style=flat)](https://github.com/Skyscanner/SkyFloatingLabelTextField/blob/master/LICENSE)\n\n[![Pod Version](https://img.shields.io/cocoapods/v/SkyFloatingLabelTextField.svg?style=flat)](https://cocoapods.org/pods/SkyFloatingLabelTextField)\n[![Carthage compatible](https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat)](https://github.com/Carthage/Carthage)\n[![Documentation](https://img.shields.io/cocoapods/metrics/doc-percent/SkyFloatingLabelTextField.svg)](http://cocoadocs.org/docsets/SkyFloatingLabelTextField/)\n[![Readme Score](http://readme-score-api.herokuapp.com/score.svg?url=https://github.com/Skyscanner/SkyFloatingLabelTextField)](http://clayallsopp.github.io/readme-score?url=https://github.com/Skyscanner/SkyFloatingLabelTextField)\n\n`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](https://itunes.apple.com/gb/app/travelpro-business-travel/id1046916687) in several places, like when [searching for flights](http://codevoyagers.com/2016/04/06/open-sourcing-skyfloatinglabeltextfield/).\n\nOn top of implementing the space-saving floating title, the component also supports using iconography, RTL text support (e.g. Arabic \u0026 Hebrew), various states (error, selected, highlighted states), and is very much customizable and extensible.\n\n![](/SkyFloatingLabelTextField/images/showcase-example.gif)\n\n## Versioning\n\nUp until version 1.2 Swift 2.2 and 2.3 compatible (and there is a Swift 2.3 branch in case you need it).\nFrom version 2.0 onwards only compatible with Swift 3.\nPlease be mindful of the version you're using.\n\n## Usage\n\nTo start using the component add it to your project using CocoaPods, Carthage or manually as per the [Installation](#installation) section.\n\nThe 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.\n\nTo 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:\n\n![](/SkyFloatingLabelTextField/images/example-1.gif)\n\n```swift\nlet textField = SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 200, height: 45))\ntextField.placeholder = \"Name\"\ntextField.title = \"Your full name\"\nself.view.addSubview(textField)\n```\n\n### Colors\n\nTo 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:\n\n![](/SkyFloatingLabelTextField/images/example-2.gif)\n\n```swift\nlet lightGreyColor = UIColor(red: 197/255, green: 205/255, blue: 205/255, alpha: 1.0)\nlet darkGreyColor = UIColor(red: 52/255, green: 42/255, blue: 61/255, alpha: 1.0)\nlet overcastBlueColor = UIColor(red: 0, green: 187/255, blue: 204/255, alpha: 1.0)\n\nlet textField1 = SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 120, height: 45))\ntextField1.placeholder = \"First name\"\ntextField1.title = \"Given name\"\nself.view.addSubview(textField1)\n\nlet textField2 = SkyFloatingLabelTextField(frame: CGRect(x: 150, y: 10, width: 120, height: 45))\ntextField2.placeholder = \"Last name\"\ntextField2.title = \"Family name\"\n\ntextField2.tintColor = overcastBlueColor // the color of the blinking cursor\ntextField2.textColor = darkGreyColor\ntextField2.lineColor = lightGreyColor\ntextField2.selectedTitleColor = overcastBlueColor\ntextField2.selectedLineColor = overcastBlueColor\n\ntextField2.lineHeight = 1.0 // bottom line height in points\ntextField2.selectedLineHeight = 2.0\nself.view.addSubview(textField2)\n```\n\n### Icons and fonts\n\nUse 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:\n\n![](/SkyFloatingLabelTextField/images/example-3.gif)\n\n#### Using a font\n\n```swift\nlet overcastBlueColor = UIColor(red: 0, green: 187/255, blue: 204/255, alpha: 1.0)\nlet textFieldFrame = CGRect(x: 150, y: 10, width: 120, height: 45)\n\nlet textField1 = SkyFloatingLabelTextFieldWithIcon(frame: textFieldFrame, iconType: .font)\ntextField1.placeholder = \"Departure\"\ntextField1.title = \"Flying from\"\ntextField1.iconFont = UIFont(name: \"FontAwesome\", size: 15)\ntextField1.iconText = \"\\u{f072}\" // plane icon as per https://fortawesome.github.io/Font-Awesome/cheatsheet/\nself.view.addSubview(textField1)\n\nlet textField2 = SkyFloatingLabelTextFieldWithIcon(frame: textFieldFrame)\ntextField2.placeholder = \"Arrival\"\ntextField2.title = \"Flying to\"\ntextField2.tintColor = overcastBlueColor\ntextField2.selectedTitleColor = overcastBlueColor\ntextField2.selectedLineColor = overcastBlueColor\n\n// Set icon properties\ntextField2.iconType = .font\ntextField2.iconColor = UIColor.lightGrayColor()\ntextField2.selectedIconColor = overcastBlueColor\ntextField2.iconFont = UIFont(name: \"FontAwesome\", size: 15)\ntextField2.iconText = \"\\u{f072}\" // plane icon as per https://fortawesome.github.io/Font-Awesome/cheatsheet/\ntextField2.iconMarginBottom = 4.0 // more precise icon positioning. Usually needed to tweak on a per font basis.\ntextField2.iconRotationDegrees = 90 // rotate it 90 degrees\ntextField2.iconMarginLeft = 2.0\nself.view.addSubview(textField2)\n```\n\n#### Using an image\n```swift\nlet textFieldframe = CGRect(x: 150, y: 10, width: 120, height: 45)\n\nlet textField1 = SkyFloatingLabelTextFieldWithIcon(frame: textFieldframe, iconType: .image)\ntextField1.placeholder = \"Departure\"\ntextField1.title = \"Flying from\"\ntextField1.iconImage = UIImage(imageLiteralResourceName: \"PlaneIcon\")\nself.view.addSubview(textField1)\n```\n\n### Error state and delegates\n\nThe 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.\n\nTo 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](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextFieldDelegate_Protocol/) protocol:\n\n![](/SkyFloatingLabelTextField/images/example-4.gif)\n\n```swift\nclass MyViewController: UIViewController, UITextFieldDelegate {\n    override func viewDidLoad() {\n        super.viewDidLoad()\n        let textField1 = SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 120, height: 45))\n        textField1.placeholder = \"Email\"\n        textField1.title = \"Email address\"\n        textField1.errorColor = UIColor.redColor()\n        textField1.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)\n        self.view.addSubview(textField1)\n    }\n    \n    // This will notify us when something has changed on the textfield\n    @objc func textFieldDidChange(_ textfield: UITextField) {\n        if let text = textfield.text {\n            if let floatingLabelTextField = textField as? SkyFloatingLabelTextField {\n                if(text.characters.count \u003c 3 || !text.containsString(\"@\")) {\n                    floatingLabelTextField.errorMessage = \"Invalid email\"\n                }\n                else {\n                    // The error message will only disappear when we reset it to nil or empty string\n                    floatingLabelTextField.errorMessage = \"\"\n                }\n            }\n        }\n    }\n}\n```\n\n### Disabled state\nThe 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.\n```swift\n    textField.disabledColor = disabledColor\n    textField.isEnabled = false\n```\n### RTL language support\n\nThe 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.\n\nAlternatively, set the `isLTRLanguage` property to manually change the writing direction.\n\n![](/SkyFloatingLabelTextField/images/RTL-example.png)\n\n### Further customizing the control by subclassing\n\nThe 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:\n- `updateColors`: override this method to customize colors whenever the state of the control changes\n- Layout overrides:\n  - `titleLabelRectForBounds(bounds:CGRect, editing:Bool)`:  override to change the bounds of the top title placeholder view\n  - `textRectForBounds(bounds: CGRect)`: override to change the bounds of the control (inherited from `UITextField`)\n  - `editingRectForBounds(bounds: CGRect)`: override to change the bounds of the control when editing / selected (inherited from `UITextField`)\n  - `placeholderRectForBounds(bounds: CGRect)`:  override to change the bounds of the placeholder view\n  - `lineViewRectForBounds(bounds:CGRect, editing:Bool)`: override to change the bounds of the bottom line view\n\n## Documentation\n\nSee the [SkyFloatingLabelTextField documentation](http://cocoadocs.org/docsets/SkyFloatingLabelTextField) on [CocoaDocs.org](http://cocoadocs.org) for the full documentation.\n\n## Installation\n\n#### CocoaPods\n\nThe control is available through [CocoaPods](https://cocoapods.org/). CocoaPods can be installed using [Ruby gems](https://rubygems.org/):\n```shell\n$ gem install cocoapods\n```\n\nThen simply add `SkyFloatingLabelTextField` to your Podfile:\n\n```\npod 'SkyFloatingLabelTextField', '~\u003e 3.0'\n```\n\nLastly, let CocoaPods fetch the latest version of the component by running:\n```shell\n$ pod update\n```\n\n##### Integrating into Objective C projects\n\nWhen integrating the component into an Objective C project, in the Podfile add `use_frameworks!`. For example as shown in [SkyFloatingLabelTextFieldObjectiveCExample](https://github.com/Skyscanner/SkyFloatingLabelTextField/tree/master/SkyFloatingLabelTextFieldObjectiveCExample):\n\n```\nuse_frameworks!\n\ntarget 'SkyFloatingLabelTextFieldObjectiveCExample' do\n  pod 'SkyFloatingLabelTextField', '~\u003e 3.0'\nend\n```\n\nThen to use the component in your code, add the following line to your `.h` or `.m` files:\n\n```objc\n@import SkyFloatingLabelTextField;\n```\n\n#### Carthage\nThe component supports [Carthage](https://github.com/Carthage/Carthage). Start by making sure you have the latest version of Carthage installed. Using [Homebrew](http://brew.sh/) run this:\n```shell\n$ brew update\n$ brew install carthage\n```\nThen add `SkyFloatingLabelTextField` to your `Cartfile`:\n```\ngithub \"Skyscanner/SkyFloatingLabelTextField\"\n```\nFinally, 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.\n\n#### Manual\n\nYou can download the latest files from our [Releases page](https://github.com/Skyscanner/SkyFloatingLabelTextField/releases). After doing so, copy the files in the `Sources` folder to your project.\n\n## Contributing\n\nWe welcome all contributions. Please read [this guide](/CONTRIBUTING.md) before opening issues or submitting pull requests, as well as how and who to contact with questions.\n\n## Credits\n\nThe original component was built by [Daniel Langh](https://github.com/intonarumori), [Gergely Orosz](https://github.com/gergelyorosz) and [Raimon Laupente](https://github.com/wolffan). Notable contributions by [Shai Shamir](https://github.com/pichirichi) (RTL language support).\n\nCredits for the original design, and improving it with iconography to Matt D. Smith ([@mds](https://twitter.com/mds)).\n\n## FAQ\n\n- *Can I use it in Objective C projects?*\n\n  Of course! Please see the [Integrating-into-Objective-C-projects](#integrating-into-objective-c-projects) section on how to integrate the component via CocoaPods.\n\n- *Does the control work well with auto layout? What about using it programmatically?*\n\n  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.\n\n- *How can I remove the line from the bottom of the textfield?*\n\n  Set `lineHeight` and `selectedLineHeight` to `0`, and the line won't be displayed.\n\n- *I'd like to validate the textfield using the `errorMessage`. How can I re-validate text is typed in the textfield?*\n\n  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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSkyscanner%2FSkyFloatingLabelTextField","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSkyscanner%2FSkyFloatingLabelTextField","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSkyscanner%2FSkyFloatingLabelTextField/lists"}