floating-text-field is a customizable text field.
The visual example of the FloatingTextField:
For basic usage, simply import the FloatingTextField package and set the text field height as follows:
import FloatingTextField
struct ContentView: View {
@State private var username: String = ""
var body: some View {
FloatingTextFieldView($username, placeholder: "username")
.frame(height: 60.0)
}
}The FloatingTextField provides an opportunity to customize text font, text color, placeholder font, placeholder color, and more.
import FloatingTextField
struct ContentView: View {
@State private var username: String = ""
var body: some View {
FloatingTextFieldView($username, placeholder: "username")
.font(Font.system(size: 17.0))
.placeholderFont(Font.system(size: 14.0))
.textColor(.black)
.placeholderColor(.gray)
.frame(height: 60.0)
}
}You can create a text field style in two simple steps.
- Define a custom text field style as follows:
import FloatingTextField
struct CustomTextFieldStyle: FloatingTextFieldStyle {
func body(content: FloatingTextField) -> FloatingTextField {
content
.font(Font.system(size: 17.0))
.placeholderFont(Font.system(size: 14.0))
.cornerRadius(12)
.placeholderBottomPadding(4.0)
.textColor(.black)
.placeholderColor(.gray)
.borderWidth(1)
.borderColor(.black)
}
}- Apply this style using
textFieldStyle(_:):
struct ContentView: View {
@State private var username: String = ""
var body: some View {
FloatingTextFieldView($username, placeholder: "username")
.textFieldStyle(style: CustomTextFieldStyle())
.frame(height: 60.0)
}
}The FloatingTextField can conceal sensitive data such as passwords. You can hide it by using the isSecureTextEntry(_:) modifier.
import FloatingTextField
struct ContentView: View {
@State private var password: String = ""
@State private var isPasswordHidden: Bool = true
var body: some View {
FloatingTextField($password, placeholder: "Password")
.textFieldStyle(style: CustomTextFieldStyle())
.isSecureTextEntry(isPasswordHidden)
.leftView {
Image(systemName: "lock")
.foregroundColor(.gray)
}
.rightView {
Button(
action: { isPasswordHidden.toggle() },
label: {
Image(systemName: "eye.fill")
.foregroundColor(.gray)
}
)
}
.frame(height: 60.0)
}
}- iOS 15.0+
- Xcode 14.0
- Swift 5.7
The Swift Package Manager is a tool for automating the distribution of Swift code and is integrated into the swift compiler. It is in early development, but floating-text-field does support its use on supported platforms.
Once you have your Swift package set up, adding floating-text-field as a dependency is as easy as adding it to the dependencies value of your Package.swift.
dependencies: [
.package(url: "https://github.com/space-code/floating-text-field.git", .upToNextMajor(from: "1.0.0"))
]- If you found a bug, open an issue.
- If you have a feature request, open an issue.
- If you want to contribute, submit a pull request.
Bootstrapping development environment
make bootstrap
Please feel free to help out with this project! If you see something that could be made better or want a new feature, open up an issue or send a Pull Request!
Nikita Vasilev, nv3212@gmail.com
floating-text-field is available under the MIT license. See the LICENSE file for more info.