{"id":13466915,"url":"https://github.com/kishanraja/FloatingLabelTextFieldSwiftUI","last_synced_at":"2025-03-26T00:31:40.188Z","repository":{"id":37868748,"uuid":"263094741","full_name":"kishanraja/FloatingLabelTextFieldSwiftUI","owner":"kishanraja","description":"Floating Label TextField for SwiftUI. FloatingLabelTextFieldSwiftUI","archived":false,"fork":false,"pushed_at":"2024-03-11T13:33:16.000Z","size":17569,"stargazers_count":495,"open_issues_count":16,"forks_count":45,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-21T09:11:23.163Z","etag":null,"topics":["cocoapods","floatinglabeltextfield","floatinglabeltextfieldswiftui","interface-builder","swift","swiftui","textfield"],"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/kishanraja.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-11T16:16:44.000Z","updated_at":"2025-01-22T08:24:14.000Z","dependencies_parsed_at":"2024-04-27T23:32:01.102Z","dependency_job_id":"ad8d9a01-03ab-4f67-9b99-de8b696d8562","html_url":"https://github.com/kishanraja/FloatingLabelTextFieldSwiftUI","commit_stats":{"total_commits":33,"total_committers":5,"mean_commits":6.6,"dds":0.1515151515151515,"last_synced_commit":"2f69aac37adc5f7dfd89cac10f1c8dff3219fd49"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kishanraja%2FFloatingLabelTextFieldSwiftUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kishanraja%2FFloatingLabelTextFieldSwiftUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kishanraja%2FFloatingLabelTextFieldSwiftUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kishanraja%2FFloatingLabelTextFieldSwiftUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kishanraja","download_url":"https://codeload.github.com/kishanraja/FloatingLabelTextFieldSwiftUI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245566099,"owners_count":20636391,"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","floatinglabeltextfield","floatinglabeltextfieldswiftui","interface-builder","swift","swiftui","textfield"],"created_at":"2024-07-31T15:00:51.305Z","updated_at":"2025-03-26T00:31:38.786Z","avatar_url":"https://github.com/kishanraja.png","language":"Swift","funding_links":[],"categories":["Libs","UI [🔝](#readme)","TextField"],"sub_categories":["UI","Content"],"readme":"# FloatingLabelTextFieldSwiftUI\n\n[![CI Status](https://img.shields.io/travis/kishanraja/FloatingLabelTextFieldSwiftUI.svg?style=flat)](https://travis-ci.org/kishanraja/FloatingLabelTextFieldSwiftUI)\n[![Version](https://img.shields.io/cocoapods/v/FloatingLabelTextFieldSwiftUI.svg?style=flat)](https://cocoapods.org/pods/FloatingLabelTextFieldSwiftUI)\n[![License](https://img.shields.io/cocoapods/l/FloatingLabelTextFieldSwiftUI.svg?style=flat)](https://cocoapods.org/pods/FloatingLabelTextFieldSwiftUI)\n[![Platform](https://img.shields.io/cocoapods/p/FloatingLabelTextFieldSwiftUI.svg?style=flat)](https://cocoapods.org/pods/FloatingLabelTextFieldSwiftUI)\n\n\nFloatingLabelTextFieldSwiftUI is a small and lightweight SwiftUI framework written in completely swiftUI (not using UIViewRepresentable) that allows to create beautiful and customisable floating label textfield! This library support RTL text (eg. Arabic) and easy to add left view and right view to your text field and customizable.\n\n\u003cp float=\"left\"\u003e\n    \u003cimg src=\"https://github.com/kishanraja/FloatingLabelTextFieldSwiftUI/blob/master/Graphics/FloatingLabelTextFieldSwiftUI.gif\" width=\"350\" height=\"623\" \u003e\n\n\u003c/p\u003e\n\nIf you like the project, please do not forget to `star ★` this repository and follow me on GitHub.\n\n\n## 📦 Requirements\n\n- iOS 13.0+\n- Xcode 11.2+\n- Swift 5.0\n\n## 💻 Usage \n\nTo start using the component add it to your project using CocoaPods or Swift Package. First of all import FloatingLabelTextFieldSwiftUI\n\n```swift\nimport FloatingLabelTextFieldSwiftUI\n```\n\n\u003cp float=\"left\"\u003e\n    \u003cimg src=\"https://github.com/kishanraja/FloatingLabelTextFieldSwiftUI/blob/master/Graphics/normal_text_field.gif\"\u003e\n\n\u003c/p\u003e\n\n```swift\nstruct ContentView: View {\n    \n    @State private var firstName: String = \"\"\n    \n    var body: some View {\n        \n        FloatingLabelTextField($firstName, placeholder: \"First Name\", editingChanged: { (isChanged) in\n            \n        }) {\n            \n        }.frame(height: 70)\n    }\n}\n```\n\n### FloatingLabelTextFieldStyle and Colors:\n\nYou can customize the colors of the textfield by using FloatingLabelTextFieldStyle property or create your own style and set a few properties. \n\n#### Property\n\n```swift\nstruct ContentView: View {\n    \n    @State private var firstName: String = \"\"\n    \n    var body: some View {\n        \n        FloatingLabelTextField($firstName, placeholder: \"First Name\", editingChanged: { (isChanged) in\n            \n        }) {\n            \n        }\n        .titleColor(.green)\n        .selectedLineColor(.blue)\n        .selectedTextColor(.blue)\n        .selectedTitleColor(.blue)\n        .frame(height: 70)\n    }\n}\n```\n#### FloatingLabelTextFieldStyle\n\nJust two step for create and add style to FloatingLabelTextField. \n\n1. Create your own theme style. Set property as per your theme.\n\n```swift\nstruct ThemeTextFieldStyle: FloatingLabelTextFieldStyle {\n    func body(content: FloatingLabelTextField) -\u003e FloatingLabelTextField {\n        content\n            .spaceBetweenTitleText(15) // Sets the space between title and text.\n            .textAlignment(.leading) // Sets the alignment for text.\n            .lineHeight(1) // Sets the line height.\n            .selectedLineHeight(1.5) // Sets the selected line height.\n            .lineColor(.gray) // Sets the line color.\n            .selectedLineColor(.blue) // Sets the selected line color.\n            .titleColor(.gray) // Sets the title color.\n            .selectedTitleColor(.blue) // Sets the selected title color.\n            .titleFont(.system(size: 12)) // Sets the title font.\n            .textColor(.black) // Sets the text color.\n            .selectedTextColor(.blue) // Sets the selected text color.\n            .textFont(.system(size: 15)) // Sets the text font.\n            .placeholderColor(.gray) // Sets the placeholder color.\n            .placeholderFont(.system(size: 15)) // Sets the placeholder font.\n            .errorColor(.red) // Sets the error color.\n            .addDisableEditingAction([.paste]) // Disable text field editing action. Like cut, copy, past, all etc.\n            .enablePlaceholderOnFocus(true) // Enable the placeholder label when the textfield is focused.\n            .allowsHitTesting(true) // Whether this view participates in hit test operations.\n            .disabled(false) // Whether users can interact with this.\n    }\n}\n```\n\n2. Add style to FloatingLabelTextField.\n\n```swift\nstruct ContentView: View {\n    \n    @State private var firstName: String = \"\"\n    \n    var body: some View {\n        FloatingLabelTextField($firstName, placeholder: \"First Name\", editingChanged: { (isChanged) in\n            \n        }) {\n            \n        }\n        .floatingStyle(ThemeTextFieldStyle())\n        .frame(height: 70)\n    }\n}\n```\n\n### Secure Text Entry\nTo enable Secure Text Entry use .isSecureTextEntry(true) property. \n\n\u003cp float=\"left\"\u003e\n    \u003cimg src=\"https://github.com/kishanraja/FloatingLabelTextFieldSwiftUI/blob/master/Graphics/secure_text_field.gif\"\u003e\n\n\u003c/p\u003e\n\n```swift\nstruct ContentView: View {\n    \n    @State private var password: String = \"\"\n    \n    var body: some View {\n        HStack(spacing: 20) {\n            FloatingLabelTextField($password, placeholder: \"Password\", editingChanged: { (isChanged) in\n                \n            }) {\n                \n            }\n            .isSecureTextEntry(true)\n            .frame(height: 70)\n        }\n    }\n}\n```\n\n### Left - Right View\nYes, you can easily add your own views, buttons or image to left view or right view of the FloatingLabelTextField.\n\n\u003cp float=\"left\"\u003e\n    \u003cimg src=\"https://github.com/kishanraja/FloatingLabelTextFieldSwiftUI/blob/master/Graphics/left-right-view.gif\"\u003e\n\n\u003c/p\u003e\n\n```swift\nstruct ContentView: View {\n    \n    @State private var password: String = \"\"\n    @State private var isPasswordShow: Bool = false\n    \n    var body: some View {\n        FloatingLabelTextField($password, placeholder: \"Password\", editingChanged: { (isChanged) in\n            \n        }) {\n            \n        }\n        .isSecureTextEntry(!self.isPasswordShow)\n            .leftView({ // Add left view.\n                Image(\"password\")\n            })\n            .rightView({ // Add right view.\n                Button(action: {\n                    withAnimation {\n                        self.isPasswordShow.toggle()\n                    }\n                    \n                }) {\n                    Image(self.isPasswordShow ? \"eye_close\" : \"eye_show\")\n                }\n            })\n            .frame(height: 70)\n            .padding()\n    }\n}\n```\n\n### Error Message \u0026 Validation\n\nFloatingLableTextFieldSwiftUI supports displaying an error and add text field validations. This can be helpfull for adding validation on your form text field. To enable isShowError property to true and pass text field validations array to text field with message according condition. You can also add validation checker variable to check is text field is valid or not on submit button action.\n\nFloatingLabelTextFieldSwiftUI also have some inbuilt validation regex checker fields like email, password, name, number.. etc. \n\nHere is some example\n\n1. Email Validation\n\u003cp float=\"left\"\u003e\n    \u003cimg src=\"https://github.com/kishanraja/FloatingLabelTextFieldSwiftUI/blob/master/Graphics/email_validation.gif\"\u003e\n\n\u003c/p\u003e\n\n```swift\nstruct ContentView: View {\n    \n    @State private var email: String = \"\"\n    @State private var isValidEmail: Bool = false\n    \n    var body: some View {\n        VStack {\n            FloatingLabelTextField($email, validtionChecker: $isValidEmail, placeholder: \"Email\", editingChanged: { (isChanged) in\n                \n            }) {\n                \n            }\n            .addValidation(.init(condition: email.isValid(.email), errorMessage: \"Invalid Email\")) /// Sets the validation condition.\n                .isShowError(true) /// Sets the is show error message.\n                .errorColor(.red) /// Sets the error color.\n                .keyboardType(.emailAddress)\n                .frame(height: 70)\n                .padding()\n            \n            Button(action: {\n                self.endEditing(true)\n                \n                if self.isValidEmail {\n                    print(\"Valid Email\")\n                    \n                } else {\n                    print(\"Invalid Email\")\n                }\n                \n            }) {\n                Text(\"Create\")\n            }\n        }\n    }\n}\n```\n\n\n2. Name Validation\n\u003cp float=\"left\"\u003e\n    \u003cimg src=\"https://github.com/kishanraja/FloatingLabelTextFieldSwiftUI/blob/master/Graphics/name_validation.gif\"\u003e\n\n\u003c/p\u003e\n\n```swift\nstruct ContentView: View {\n    \n    @State private var lastName: String = \"\"\n    \n    var body: some View {\n        FloatingLabelTextField($lastName, placeholder: \"Last Name\", editingChanged: { (isChanged) in\n            \n        }) {\n            \n        }\n        .isShowError(true) /// Sets the is show error message.\n        .addValidations([.init(condition: lastName.isValid(.alphabet), errorMessage: \"Invalid Name\"),\n                         .init(condition: lastName.count \u003e= 2, errorMessage: \"Minimum two character long\")\n        ]) /// Sets the validation conditions.\n            .floatingStyle(ThemeTextFieldStyle2())\n            .frame(height: 70)\n    }\n}\n```\n\n\n## 🐾 Examples\n\nTo run the example project, clone the repo, and run `pod install` from the Example directory first.\n\n## 💾 Installation\n\n### CocoaPods:\n\nFloatingLabelTextFieldSwiftUI is available through [CocoaPods](https://cocoapods.org). To install\nit, simply add the following line to your Podfile:\n\n```ruby\npod 'FloatingLabelTextFieldSwiftUI'\n```\n\n### Swift Package Manager\n\nThe [Swift Package Manager](https://swift.org/package-manager/) is a tool for managing the distribution of Swift code. It’s integrated with the Swift build system to automate the process of downloading, compiling, and linking dependencies.\n\nTo integrate `FloatingLabelTextFieldSwiftUI` into your Xcode project using Xcode 11+, specify it in `File \u003e Swift Packages \u003e Add`:\n\n```ogdl\nhttps://github.com/kishanraja/FloatingLabelTextFieldSwiftUI.git\n```\n\n### Manual\n\nYou can download the latest files from our [Releases page](https://github.com/kishanraja/FloatingLabelTextFieldSwiftUI/releases). After doing so, copy the files in the `Sources` folder to your project.\n\n\n## 🙋🏻‍♂️ Author\n\nkishanraja, rajakishanrk1996@gmail.com\n\n## 💰 Contribution\n\nFeel free to fork the project and send me a pull-request! \n\n## 📝 Feedback\nPlease file an [Issue](https://github.com/kishanraja/FloatingLabelTextFieldSwiftUI/issues).\n\n## 📜 License\n\nFloatingLabelTextFieldSwiftUI is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkishanraja%2FFloatingLabelTextFieldSwiftUI","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkishanraja%2FFloatingLabelTextFieldSwiftUI","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkishanraja%2FFloatingLabelTextFieldSwiftUI/lists"}