krishnarlolage/borderedtextfield
A beautiful, customizable SwiftUI text field component with placeholder text elegantly positioned within the border.
Features
- 🎨 Elegant Design: Placeholder text integrated into the border for a modern look
- 🔐 Secure Entry: Built-in password field support with show/hide toggle
- 🎯 Customizable: Extensive customization options for colors, states, and behavior
- ♿ Accessible: Designed with accessibility in mind
- 📱 Multi-platform: Supports iOS and macCatalyst
- 🧪 Well-tested: Comprehensive test coverage
Installation
Swift Package Manager
Add BorderedTextField to your project using Swift Package Manager:
- In Xcode, go to File → Add Package Dependencies
- Enter the repository URL:
https://github.com/KrishnaRLolage/BorderedTextField.git - Select the version you want to use
- Click "Add Package"
Or add it to your Package.swift:
dependencies: [
.package(url: "https://github.com/KrishnaRLolage/BorderedTextField.git", from: "1.0.0")
]Usage
Basic Usage
import SwiftUI
import BorderedTextField
struct ContentView: View {
@State private var text = ""
@State private var placeholder = "Enter your text"
var body: some View {
BorderedTextField(
placeHolder: $placeholder,
text: $text
)
.padding()
}
}Advanced Usage
import SwiftUI
import BorderedTextField
struct LoginView: View {
@State private var username = ""
@State private var password = ""
@State private var usernamePlaceholder = "Username"
@State private var passwordPlaceholder = "Password"
var body: some View {
VStack(spacing: 20) {
// Regular text field
BorderedTextField(
placeHolder: $usernamePlaceholder,
text: $username,
borderColor: .gray,
highlightColor: .blue
)
// Password field with custom colors
BorderedTextField(
placeHolder: $passwordPlaceholder,
text: $password,
isSecureField: true,
borderColor: .gray,
highlightColor: .green
)
// Disabled field
BorderedTextField(
placeHolder: .constant("Read-only field"),
text: .constant("Cannot edit this"),
isEditingEnabled: false,
borderColor: .gray.opacity(0.5)
)
}
.padding()
}
}Configuration Options
Parameters
| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | placeHolder | Binding<String> | Required | Placeholder text displayed in the border | | text | Binding<String> | Required | The text field's value | | isEditingEnabled | Bool | true | Whether the text field is editable | | isSecureField | Bool | false | Whether to use secure text entry (password field) | | showBorderPlaceHolder | Bool | true | Whether to show placeholder in the border | | borderColor | Color | .gray | Border color when not focused | | highlightColor | Color | .blue | Border color when focused |
Examples
// Basic editable field
BorderedTextField(placeHolder: $placeholder, text: $text)
// Non-editable field
BorderedTextField(
placeHolder: $placeholder,
text: $text,
isEditingEnabled: false
)
// Password field
BorderedTextField(
placeHolder: $placeholder,
text: $text,
isSecureField: true
)
// Custom colors
BorderedTextField(
placeHolder: $placeholder,
text: $text,
borderColor: .red,
highlightColor: .green
)
// Hidden placeholder (traditional border)
BorderedTextField(
placeHolder: $placeholder,
text: $text,
showBorderPlaceHolder: false
)Demo
[BorderedTextField Demo]
Requirements
- iOS 14.0+ / macCatalyst 14.0+
- Swift 5.9+
- Xcode 15.0+
Contributing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
- Thanks to the SwiftUI community for inspiration and feedback
- Special thanks to contributors who helped improve this package
Package Metadata
Repository: krishnarlolage/borderedtextfield
Default branch: main
README: README.md