https://github.com/devstacklimited/floatinglabeltextfield
A lightweight SwiftUI library that provides a customizable floating label text field with outlined border, secure password toggle (eye icon), and Material Design–inspired style. Supports iOS 14+ and Swift Package Manager.
https://github.com/devstacklimited/floatinglabeltextfield
customtextfield floatinglabelinput floatinglabeltextfield floatinglabeltextfieldswiftui swift swiftui
Last synced: 8 months ago
JSON representation
A lightweight SwiftUI library that provides a customizable floating label text field with outlined border, secure password toggle (eye icon), and Material Design–inspired style. Supports iOS 14+ and Swift Package Manager.
- Host: GitHub
- URL: https://github.com/devstacklimited/floatinglabeltextfield
- Owner: devstacklimited
- License: mit
- Created: 2025-10-11T22:20:48.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-12T19:57:45.000Z (8 months ago)
- Last Synced: 2025-10-12T23:02:45.700Z (8 months ago)
- Topics: customtextfield, floatinglabelinput, floatinglabeltextfield, floatinglabeltextfieldswiftui, swift, swiftui
- Language: Swift
- Homepage:
- Size: 15.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FloatingLabelTextField
A lightweight and customizable **SwiftUI text field with a floating label**.
This package provides a Material Design–inspired floating label input field for iOS, making form UIs clean, modern, and user-friendly.
---
## ✨ Features
- ✅ Floating label with customizable font and color
- ✅ Secure text entry with **show/hide password** toggle
- ✅ Fully customizable:
- Height
- Corner radius
- Border color and width
- Label font and color
- Text font
- ✅ Supports **iOS 14+**
- ✅ Swift Package Manager support
---
## 📦 Installation
### Swift Package Manager
You can add **FloatingLabelTextField** to your project in **two ways**:
1. **Xcode**
- Go to `File > Add Packages...`
- Enter the URL of this repo:
```
https://github.com/devstacklimited/FloatingLabelTextField.git
```
- Select the version rule and finish.
2. **Package.swift**
```swift
dependencies: [
.package(url: "https://github.com/devstacklimited/FloatingLabelTextField.git", from: "1.0.0")
]```
## 🚀 Usage
```swift
import SwiftUI
import FloatingLabelTextField
struct ContentView: View {
@State private var username: String = ""
@State private var password: String = ""
var body: some View {
VStack(spacing: 20) {
// Normal TextField
FloatingLabelTextField(
label: "Username",
text: $username,
placeholder: "Enter your username",
labelColor: .gray,
borderColor: .blue,
labelFont: .system(size: 14, weight: .medium),
textFont: .system(size: 16)
)
// Secure TextField with toggle
FloatingLabelTextField(
label: "Password",
text: $password,
placeholder: "Enter your password",
isSecure: true,
labelColor: .gray,
borderColor: .red,
labelFont: .system(size: 14, weight: .medium),
textFont: .system(size: 16)
)
}
.padding()
}
}
```
## ⚙️ Parameters
| Parameter | Type | Default | Description |
| -------------------- | ------------------------------ | ------------------- | ----------------------------- |
| `label` | `String` | — | Floating label text |
| `text` | `Binding` | — | Bound text value |
| `placeholder` | `String?` | `nil` | Placeholder text |
| `isSecure` | `Bool` | `false` | Enables secure entry + toggle |
| `labelColor` | `Color` | `.black` | Floating label text color |
| `keyboardType` | `UIKeyboardType` | `.default` | Keyboard type |
| `autocapitalization` | `TextInputAutocapitalization?` | `.sentences` | Autocapitalization mode |
| `height` | `CGFloat` | `48` | Field height |
| `cornerRadius` | `CGFloat` | `8` | Border corner radius |
| `borderColor` | `Color` | `.primary` | Border color |
| `borderWidth` | `CGFloat` | `1` | Border width |
| `labelFont` | `Font` | `.system(size: 12)` | Label font |
| `textFont` | `Font` | `.system(size: 16)` | Input text font |
## 🛠️ Example Preview
Here’s how it looks with default values:
## 💡 Contributing
Contributions, issues, and feature requests are welcome!
If you use this library and like it, **don’t forget to star the repo** ⭐️. It helps the project grow and reach more developers.
## 📝 License
FloatingLabelTextField is available under the MIT License.