kishanraja / floatinglabeltextfieldswiftui Goto Github PK
View Code? Open in Web Editor NEWFloating Label TextField for SwiftUI. FloatingLabelTextFieldSwiftUI
License: MIT License
Floating Label TextField for SwiftUI. FloatingLabelTextFieldSwiftUI
License: MIT License
Is it possible fo turn off autocapitalization or change the autocapitalizationType on the text view?
I'd like to inform user if text field remains empty after button tap. For example, using placeholder color.
Hi Raja,
Your library is exactly match my requirements. But only problem is I don't know how to set border for this? Can you suggest pls.
How should i localize the placeholder to multiple language if the placeholder field isn't from LocalizedStringKey
class ?
Consider the following source code:
I have discovered a few issue with validation.
FloatingLabelTextField($username, validtionChecker: $isValidUsername, placeholder: "Username")
.addValidation(.init(condition: !username.isEmpty, errorMessage: "Username is required"))
.isShowError(true)
.errorColor(.red)
.frame(height: 50)
isValidPassword
is always falseFloatingLabelTextField($password, validtionChecker: $isValidPassword, placeholder: "Password")
.addValidation(.init(condition: !password.isEmpty, errorMessage: "Password is required"))
.isShowError(true)
.errorColor(.red)
.isSecureTextEntry(!self.isPasswordShow)
.frame(height: 50)
Any assistance would be appreciated
isValidEmail is always false...
Tested in SwiftUI 3
In the example, how would you make it work if the mobile number where an Integer instead of a String?
I haven't dug into the internals of the code yet, but would it be possible to add support for conditionally importing any references to UIKit? As it stands, the references to UIKit are preventing this library from being used in macOS SwiftUI applications.
When applying .secureTextEntry as proposed in the example:
Xcode 14.2, iOS 16.0
Feature request: Disable editing of the text field, while still enabling buttons added to a left/right view. For example (based on the sample code provided), I can do this:
var body: some View {
FloatingLabelTextField($password, placeholder: "Password", editingChanged: { (isChanged) in
}) {
}
.isSecureTextEntry(!self.isPasswordShow)
.leftView({ // Add left view.
Image("password")
})
.rightView({ // Add right view.
Button(action: {
withAnimation {
self.isPasswordShow.toggle()
}
}) {
Image(self.isPasswordShow ? "eye_close" : "eye_show")
}
})
.frame(height: 70)
.padding()
}
However, if I want the text field itself to be read-only and i set disabled(true)
, that also disables the Button
in rightView
. I'd like to be able to still toggle the visibility of the field while disabling the ability to edit.
Add an option to pass the return key type on keyboard
Hi,
One problem our users have complained about is that when they click a field to set focus it does not work. We think what's happening is that they are clicking the label area instead of the text field. It would be good if that when a user clicks the label it sets focus to the text field. It would also be good if the label expanded to 100% width of the area so that you can click anywhere in the field to get it to accept focus.
Thanks,
-Mark
Hi, it doesn't look possible to have both my own TextFieldStyle and .isSecureTextEntry
Thank you. Philippe.
Hi,
Would be great to have the option to animate the label as soon as the textfield is focused, rather than when the user starts typing.
Like shown in the material components site:
https://material-ui.com/components/text-fields/
Much Appreciated.
Is it possible to add a limit to the amount of text entered?
FloatingLabelTextField($passwordText, validtionChecker: $passwordValid, placeholder: "Password") { (bool) in
} commit: {
}
.isSecureTextEntry(true)
.isShowError(true) /// Sets the is show error message.
.errorColor(.red) /// Sets the error color.
.floatingStyle(MeterTextFieldStyle())
.frame(height: 51)
That is my code and it does not work properly when run on an iPhone 12 mini. This is the field that shows up:
hi,
the validtion Checker variable is being changed to false when not passing the validation but not becoming true when it passes it
the error label is not showing but the binding variable still false
please advise
regards
Podspecs not updated to 5.0.0
I am creating mobile number field and setting keyboard type as NumberPad. Then following scenario occurs:
When running with iPad keyboard we are able to enter special characters. (iPad only)
We can paste the text which is copied earlier(iPad and iPhone).
How to find out each and every character typed? callbacks not calling
I am able to do this without your library by reading this tutorial https://programmingwithswift.com/numbers-only-textfield-with-swiftui/
see image here:
I don"t have clear idea where to implement this in your class files. It would much better with those features.
Hope you got my points, Thanks for your great work.
I was using multiple FloatingLabelTextField on clicked submit button ValidationChecker until validate first text field second text field flag state not change even second text valid.
FloatingLabelTextField($registrationDetails.firstName,validtionChecker: $isValidFirstname, placeholder: "Voornaam *")
.addValidations([.init(condition: registrationDetails.firstName.isValid(.name), errorMessage: "Enter Valid Firstname")
])
.isShowError(true)
.isRequiredField(true, with: "Enter Firstname")
.floatingStyle(ThemeTextFieldStyle())
.padding(8)
.frame(height: 60)
.background(RoundedRectangle(cornerRadius: 4)
.fill(Color("textfieldBackgroundColor"))
.shadow(color: Color("shadowColor"), radius: 5, x: 0, y: 0))
.padding()
FloatingLabelTextField($registrationDetails.middleName, placeholder: "Tussenvoegsel ")
.addValidations([.init(condition: registrationDetails.middleName.isValid(.name), errorMessage: "Enter Valid Middlename")
])
.isShowError(true)
.floatingStyle(ThemeTextFieldStyle())
.padding(8)
.frame(width: 300, height: 60, alignment: .leading)
.background(RoundedRectangle(cornerRadius: 4)
.fill(Color("textfieldBackgroundColor"))
.shadow(color: Color("shadowColor"), radius: 5, x: 0, y: 0))
.padding()
FloatingLabelTextField($registrationDetails.lastName,validtionChecker: $isValidLastname, placeholder: "Achternaam *")
.addValidations([.init(condition: registrationDetails.lastName.isValid(.name), errorMessage: "Enter Valid Lastname")
])
.isShowError(true)
.isRequiredField(true, with: "Enter Lastname")
.floatingStyle(ThemeTextFieldStyle())
.padding(8)
.frame(height: 60)
.background(RoundedRectangle(cornerRadius: 4)
.fill(Color("textfieldBackgroundColor"))
.shadow(color: Color("shadowColor"), radius: 5, x: 0, y: 0))
.padding()
Can you please help.
Is there any possibility to show the error message to display below the textfield instead of replacing the placeholder text
How can i give accessibilityIdentifier to text field, because if i add accessibilityIdentifier to FloatingLabelTextField it did not work with UI Test Case
Example:
FloatingLabelTextField($firstName, placeholder: "First Name", editingChanged: { (isChanged) in
})
accessibilityIdentifier("firstname_textfield")
Than i code in Test Case
let firstnameTextField = app.textFields["firstname_textfield"]
firstnameTextField.tap()
firstnameTextField.typeText("test user")
in text field it is not typing "test user"
can you please let me know how to make working in UI Test Case?
Title doesn't move outside text field after editing was started if text field is inside other view.
When the keyboard pops up, the TextFeild should automatically move up the corresponding distance
How to remove the bottom horizontal line ?
I defined a FloatingLabelTextField (with var isValidMasterPwd2 as validtionChecker) whose content must be the same as the string inserted in another TextField. If I insert a string identical to the other in this TextField, the variable isValidMasterPwd2 becomes TRUE only after closing the keyboard.
Is there a way for the variable to immediately become TRUE as soon as the validity conditions are satisfied?
FloatingLabelTextField($masterPwd2, validtionChecker: $isValidMasterPwd2,
placeholder: "Re-type Password", editingChanged: { (isChanged) in
}) {
}
.isShowError(true)
.addValidations([.init(condition: masterPwd1 == masterPwd2, errorMessage: "Password not equal")])
.isRequiredField(true, with: "Password field is required")
.isSecureTextEntry(!self.isMasterPwd2Show)
.modifier(ThemeTextField())
FloatingLabelTextField($txtEmail,
validtionChecker: $isValidEmail,
placeholder: TextFieldPlaceholder.email) { isChanged in
print("email text field ---- \(isChanged)")
}
.addValidation(.init(condition: txtEmail.isValid(.email),
errorMessage: ErrorMessage.invalidEmail))
.isShowError(true)
.errorColor(.red)
.keyboardType(.emailAddress)
.textInputAutocapitalization(.never)
.frame(height: 70)
.padding(EdgeInsets(.init(top: 0, leading: 30, bottom: 0, trailing: 30)))
//------------Password
FloatingLabelTextField($txtPassword,
validtionChecker: $isValidPassword,
placeholder: TextFieldPlaceholder.newPassword) { isChanged in
print("password text field ---- \(isChanged)")
}
.addValidations([.init(condition: txtPassword.isValid(.password),
errorMessage: ErrorMessage.invalidPassword),
.init(condition: txtPassword.count >= 5,
errorMessage: ErrorMessage.minimumPasswordLength)
])
.isSecureTextEntry(!self.isPasswordShow)
.rightView({
Button(action: {
self.isPasswordShow.toggle()
}, label: {
Image(systemName: self.isPasswordShow ? "eye.slash.fill" : "eye.fill")
})
})
.isShowError(true)
.errorColor(.red)
.keyboardType(.default)
.frame(height: 70)
.padding(EdgeInsets(top: 0, leading: 30, bottom: 0, trailing: 30))
Thanks for the great package. Unfortunately due to your use of .frame(... maxHeight: .infinity ...)
, the view tries to grab the maximum of space, which means e.g., in a VBox
, it overrides your any Spacer
s, etc. and aligns itself always to the bottom.
I think it would be more versatile without these settings.
Is there a way to disable all animations for FloatingLabelTextFieldSwiftUI?
Whenever other sibling views are added/removed above it (from the viewModel's state such as validation errors), the FloatingLabelTextFieldSwiftUI gets pushed down/up on the view. This animates the title label to lag behind the rest of the UI components, creating an undesirable effect.
It would be preferable to turn off the animation in this context.
how can I set input view with FloatingLabelTextField ? I wanted to display picker instead of keyboard ? but currently can't find a way to set input view.
let me know if there is a way.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.