🌬 SwiftUI FloatingTextField🌬

---

📹 Preview

🏁 Getting Started

Requirements

• Xcode 11+
• SwiftUI
• iOS 14+
• macOS 10.15+

Installaion

Swift Package Manager(SPM)

File ➜ Swift Packages ➜ Add Package Dependancy..

.package(url: "https://github.com/Changemin/FloatingTextField", from: "1.1.0")

🎈Usage

FloatingTextField(_ content: Binding<String>, placeholder: String)
FloatingSecureField(_ content: Binding<String>, placeholder: String)
// Secure Field for password

• content : user input
• placeholder : placeholder text before add text

🛠Custom Modifiers

FloatingTextField(_ content: Binding<String>, placeholder: String)
    .accentColor(_ color: Color)
    .contentType(_ contentType: ContentType)
    .icon(systemName icon : String)
    .showClearButton(_ show: Bool)
    .styled(_ style: FloatingTextFieldStyle)

// All of the parameter is optional

• .accentColor() : Width of button
• .contentType() : .none .email .number .phone .name support different keyboard type
• .icon() : icon name of SF Symbols
• .showClearButton() : to show clear button or not
• .styled()(In Progess) : FloatingTextFieldStyle.normal, FloatingTextFieldStyle.sqaure

Example

👶 Simple

import SwiftUI
import FloatingTextField

struct ContentView: View {
    @State var input: String = ""
    
    var body: some View {
        FloatingTextField($input, placeholder: "Please type")
            .padding()
    }
}

Result

➕ Add Icon

import SwiftUI
import FloatingTextField

struct ContentView: View {
    @State var input: String = ""
    
    var body: some View {
        FloatingTextField($input, placeholder: "Please type")
            .icon(systemName: "flame.fill")
            .padding()
    }
}

Result

Advanced

import SwiftUI
import FloatingTextField

struct ContentView: View {
    @State var input: String = ""
    
    var body: some View {
        FloatingTextField($input, placeholder: "Nick Name")
            .icon(systemName: "flame.fill")
            .contentType(.name)
            .accentColor(Color.orange)
            .autocapitalization(.none)
            .disableAutocorrection(true)
            .padding()
    }
}

You can also use TextField modifiers like .autocapitalization() .autocapitalization()

Result

✅ TODO

• Square Style
• Add Restrict Options
• Validation Check

📜 License

FloatingTextField is available under the MIT license. See the LICENSE file for more info.

✍️ Author

• Byun Kyung Min ➜ 🇰🇷@Changemin