{"id":13489751,"url":"https://github.com/FahimF/FloatLabelFields","last_synced_at":"2025-03-28T05:31:13.046Z","repository":{"id":23940156,"uuid":"27321578","full_name":"FahimF/FloatLabelFields","owner":"FahimF","description":"Text entry controls which contain a built-in title/label so that you don't have to add a separate title for each field.","archived":false,"fork":false,"pushed_at":"2020-01-15T14:53:28.000Z","size":89,"stargazers_count":1189,"open_issues_count":17,"forks_count":107,"subscribers_count":40,"default_branch":"master","last_synced_at":"2025-03-19T19:44:54.407Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FahimF.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-30T02:10:32.000Z","updated_at":"2025-02-15T07:41:41.000Z","dependencies_parsed_at":"2022-08-06T00:00:53.174Z","dependency_job_id":null,"html_url":"https://github.com/FahimF/FloatLabelFields","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FahimF%2FFloatLabelFields","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FahimF%2FFloatLabelFields/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FahimF%2FFloatLabelFields/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FahimF%2FFloatLabelFields/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FahimF","download_url":"https://codeload.github.com/FahimF/FloatLabelFields/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245960752,"owners_count":20700781,"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":[],"created_at":"2024-07-31T19:00:34.462Z","updated_at":"2025-03-28T05:31:13.026Z","avatar_url":"https://github.com/FahimF.png","language":"Swift","funding_links":[],"categories":["Swift","Libs","Screenshots","TextField","ALL"],"sub_categories":["UI"],"readme":"FloatLabelFields\n================\n[![Platform](http://img.shields.io/badge/platform-ios-blue.svg)](https://developer.apple.com/iphone/index.action)\n[![License](http://img.shields.io/badge/license-MIT-orange.svg)](http://mit-license.org)\n[![Issues](http://img.shields.io/github/issues/FahimF/FloatLabelFields.svg)](https://github.com/FahimF/FloatLabelFields/issues?state=open)\n\n- [Overview](#overview)\n- [Installation](#installation)\n\t- [Via Interface Builder](#via-interface-builder)\n\t- [Via Code](#via-code)\n- [Credits](#credits)\n- [Additional References](#references)\n- [Questions](#questions)\n\n## Overview ##\n\n`FloatLabelFields` is the Swift implementation of a UX pattern that has come to be known as the **\"Float Label Pattern\"**. The initial Objective-C implementation of this pattern can be found on Github as [JVFloatLabeledTextField](https://github.com/jverdi/JVFloatLabeledTextField).\n\nDue to space constraints on mobile devices, it is common to rely solely on placeholders as a means to label fields.\nThis presents a UX problem, in that, once the user begins to fill out a form, no labels are present.\n\nThis UI component library, which includes both a `UITextField` and `UITextView` subclass, aims to improve the user experience by having placeholders transition into floating labels that hover above the fields after they are populated with text.\n\nCredits for the concept to Matt D. Smith ([@mds](http://www.twitter.com/mds)), and his [original design](http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users):\n\n![Matt D. Smith's Design](https://cloud.githubusercontent.com/assets/181110/5260534/f64efed4-7a4a-11e4-9b62-2cc1e009ee95.gif)\n\nSince the code is Swift-based, do note that this version of the component swill only work on iOS 7.x+.\n\n## Installation ##\n\nYou can install the `FloatLabelField` components two ways:\n\n### Via Interface Builder ###\n\nJust add a `UITextField` or `UITextView` to your storyboard and then set the custom class for the control to either `FloatLabelTextField` or `FloatLabelTextView`.\n\n![Custom Class](https://cloud.githubusercontent.com/assets/181110/5260533/f64a23fa-7a4a-11e4-8505-563a8e7ad300.png)\n\n**Note:** Sometimes, you might have to set the Module explicitly instead of letting Xcode set it implicitly too before it works.\n\nNext, switch to the Attributes Inspector tab and set the necessary attributes to configure your text field or text view. The *Placeholder* attribute (or *Hint* in the case of a `UITextView`) defines the actual title which will be used for your field. \n\n![Properties](https://cloud.githubusercontent.com/assets/181110/5260537/f652f66a-7a4a-11e4-80ee-2645e3fe3e80.png)\n\nThe other values such as *Hint Y Padding*, *Title Y Padding*, *Title Text Colour* etc. define how the title will look.\n\nIf everything is set up correctly, you'll see the title display on Interface Builder after you've configured the field.\n\n![Final Result](https://cloud.githubusercontent.com/assets/181110/5260535/f651ffb2-7a4a-11e4-8703-6df7959e0bc4.png)\n\n### Via Code ###\n\nUsing `FloatLabelFields` via code works the same as you would do to set up a `UITextField` or `UITextView` instance. Simply create an instance of the class, set the necessary properties, and then add the field to your view.\n\n```swift\nlet fld = FloatLabelTextField(frame:vwHolder.bounds)\nfld.placeholder = \"Comments\"\nvwHolder.addSubview(fld)\n```\n\n## Credits ##\n- This project derives inspiration from [jverdi](https://github.com/jverdi)'s Objective-C [JVFloatLabeledTextField](https://github.com/jverdi/JVFloatLabeledTextField) project.\n\n## Additional References ##\n\n[How the Float Label Pattern Started](http://mattdsmith.com/float-label-pattern/) - Matt D. Smith  \n[Float Label Pattern](http://bradfrostweb.com/blog/post/float-label-pattern/) - Brad Frost  \n[Material Design - Floating Labels](http://www.google.com/design/spec/components/text-fields.html#text-fields-floating-labels) - Google\n\n## Questions? ##\n\n* E-mail: fahimf (at) gmail (dot) com\n* Web: [http://rooksoft.sg/](http://rooksoft.sg/)\n* Twitter: [http://twitter.com/FahimFarook](http://twitter.com/FahimFarook) \n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFahimF%2FFloatLabelFields","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFahimF%2FFloatLabelFields","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFahimF%2FFloatLabelFields/lists"}