UITextField subclass with floating labels

Overview

JVFloatLabeledTextField

Build Status Carthage compatible Pod Version Pod Platform Pod License CocoaPods

JVFloatLabeledTextField is the first implementation of a UX pattern that has come to be known the "Float Label Pattern".

Due to space constraints on mobile devices, it is common to rely solely on placeholders as a means to label fields. This presents a UX problem, in that, once the user begins to fill out a form, no labels are present.

This UI component library, which includes both a UITextField and UITextView subclass, aims to improve the user experience by having placeholders transition into floating labels that hover above the fields after they are populated with text.

Credits for the concept to Matt D. Smith (@mds), and his original design:

Matt D. Smith's Design

The component is officially supported for iOS 9 and greater.

Getting started via CocoaPods

sudo gem install cocoapods

Create a Podfile in your project directory:

pod init

Add the following to your Podfile project's target:

pod 'JVFloatLabeledTextField'

Then run CocoaPods with pod install.

Finally, include JVFloatLabeledTextField.h and JVFloatLabeledTextView.h in your project.

Getting started via Carthage

brew update
brew install carthage

Create a Cartfile in your project directory that contains:

github "jverdi/JVFloatLabeledTextField"

Then run carthage with carthage update and add JVFloatLabeledText.framework to your project from the Carthage/Build/iOS directory.

Finally, include JVFloatLabeledText.h in your project:

#import 
   

   

Getting started via SPM (Xcode 11+)

Click File -> Swift Packages -> Add Package Dependency, enter JVFloatLabeledText repo's URL.

After select the package, you can choose the dependency type (tagged version, branch or commit). Then Xcode will setup all the stuff for you.

If you're a framework author and use JVFloatLabeledTextField as a dependency, update your Package.swift file:

let package = Package(
    dependencies: [
        .package(url: "https://github.com/jverdi/JVFloatLabeledTextField", from: "1.2.2")
    ],
)

Additional References

How the Float Label Pattern Started - Matt D. Smith
Float Label Pattern - Brad Frost
Material Design - Floating Labels - Google

Ports and Alternate Implementations

Android - Henrik Sandstrรถm
Android - Kaushik Gopal
Android - Kevin Johnson
Xamarin.iOS - Greg Shackles
Xamarin.Android - Johan du Toit
CSS Jonathan Snook
JQuery / Zepto.js - Achmad Mahardi
JQuery - Mike Mitchell
AngularJS - Dave Ackerman
Bootstrap plugin - Matt Powell
JavaFX - Andy Till
Swift - Dirk Fabisch
Swift - Fahim Farook
Swift - Neeraj Kumar
Swift - Jimmy Jose
Swift - Skyscanner (Daniel Langh, Gergely Orosz, Raimon Lapuente)
ObjC - Arthur Ariel Sabintsev
ObjC - Rob Phillips
4D - Maurice Inzirillo
Appcelerator Titanium - The Smiths
B4i - Erel Uziel

Added a port? Let me know - @jverdi

Comments
  • textfield doesn't horizontally scroll with the cursor

    textfield doesn't horizontally scroll with the cursor

    screenshot 2014-11-10 17 34 36 I have same issue as #67. Is there any workaround for this?

    If the text is bigger then the visible space the cursor fails to scroll to the right with the text, as the standard behavior does for a UITextField. Seems like setting the textRectForBounds, stops the UITextField from tracking the cursor.

    I have same issue. Is there any workaround for this? I am using constraint.

    let contentView = UIView()
            contentView.setTranslatesAutoresizingMaskIntoConstraints(false)
    let emailInput = JVFloatLabeledTextField()
            emailInput.floatingLabel.font = PlaceHolderFontSmall
            emailInput.floatingLabelTextColor = PlaceholderSmallColor
            emailInput.setTranslatesAutoresizingMaskIntoConstraints(false)
    
    let views = ["contentView": contentView, "emailInput": emailInput]
            let constrainV = NSLayoutConstraint.constraintsWithVisualFormat("V:|-(16)-[emailInput(36)]-(16)-|",
                options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: views)
            contentView.addConstraints(constrainV)
    
            let constrainH = NSLayoutConstraint.constraintsWithVisualFormat("H:|-10-[emailInput(260)]-10-|",
                options: nil, metrics: nil, views: views)
            contentView.addConstraints(constrainH)
    
    opened by angeloh 9
  • Create UITextView Equivalent

    Create UITextView Equivalent

    I would appreciate it if you added a UITextView equivalent for this control. I have tried using RPFloatingPlaceholderTextView but it has several displaying issues. I believe this should be simple for you to port over to a UITextView. Thanks!

    opened by thomasconner 6
  • Can I show a bottom border when text field get focus?

    Can I show a bottom border when text field get focus?

    Can I show a bottom border when text field get focus?

    Please see the screenshot attached.

    screen shot 2016-05-15 at 10 32 32 pm

    Reference: First Name

    Oh and yes, thanks for the awesome library! ๐Ÿ‘

    opened by hemangshah 5
  • Setting label centered text loses alignment

    Setting label centered text loses alignment

    When I set the text of my label within the viewDidAppear it works fine:

    But when I set it within the viewDidLoad the alignment is left from the center as you can see in the image:

    opened by cytryn 5
  • Release 1.0.0 broken on iOS 8.1.2

    Release 1.0.0 broken on iOS 8.1.2

    It seems that release 1.0.0 messed the vertical positions of the inner textField. Version 0.0.9 was fine.

    This is on an iPhone 6 running iOS 8.1.2, building from Xcode 6.2 beta 3 with iOS 7.0 deployment target.

    See the following screenshots (first two screenshots are 1.0.0, last two 0.0.9):

    1 0 0 - a 1 0 0 - b 0 0 9 - a 0 0 9 - b

    opened by rsanchezsaez 5
  • TextView placeholder Y offset in Auto Layout

    TextView placeholder Y offset in Auto Layout

    Hi jverdi, your repo is great and I have used it one of my app. Thank you for putting out such a great resources! I have a problem here: So everything works fine when I am using frame to define the TextField or TextView. But when I am using Auto Layout. There's Y offset on the Placeholder UILabel. Here's a screen shot: http://cl.ly/image/4630050C1y3b You can see that the one on the top is a TextField, which works fine but the one on the bottom is the TextView, where the placeholder "Detail" has a offset. You didn't make the placeholder UILabel public so I can't modify that. Is there any way to solve this problem?

    Thank you in advance

    opened by yinanfang 5
  • JVFloatLabeledTextView text is wrong color when using NSAttributedString for placeholder.

    JVFloatLabeledTextView text is wrong color when using NSAttributedString for placeholder.

    If you use an NSAttributedString for a placeholder and then enter text, the newly entered text is using the same color as the placeholder instead of using the text color assigned to the view.

    opened by toddfreese 5
  • textfield doesn't horizontally scroll with the cursor.

    textfield doesn't horizontally scroll with the cursor.

    If the text is bigger then the visible space the cursor fails to scroll to the right with the text, as the standard behavior does for a UITextField. Seems like setting the textRectForBounds, stops the UITextField from tracking the cursor.

    As I typed it out.. screen shot 2014-08-11 at 1 29 52 pm

    If press down and scroll to the right of the same text. screen shot 2014-08-11 at 1 31 05 pm

    opened by gitHendrix 5
  • Floating label's location not taking leftView and leftViewMode property into account

    Floating label's location not taking leftView and leftViewMode property into account

    If I use UITextField.leftView to show an indicator or something the floating label's X coordinate is wrong since its not accounted for when its being calculated.

    opened by hotngui 5
  • Version 1.2.2 not available via SPM

    Version 1.2.2 not available via SPM

    When I try to add this to my project via SPM I get this error:

    https://github.com/jverdi/JVFloatLabeledTextField has no Package.swift manifest for version 1.2.2

    I see that the SPM manifest is added on master but the commit has not been tagged. Maybe you could tag a 1.2.3 version which includes SPM manifest?

    Screenshot 2020-09-11 at 15 58 56 Screenshot 2020-09-11 at 15 59 04 Screenshot 2020-09-11 at 15 59 27

    opened by SeanAsby 4
  • Update placeholder when placeholderColor is set

    Update placeholder when placeholderColor is set

    Fixes an issue where setting placeholderColor in Interface Builder would not have any effect since the placeholderColor was set after the placeholderText.

    opened by ndrewh 4
  • fatal error: module 'JVFloatLabeledTextField' in AST file

    fatal error: module 'JVFloatLabeledTextField' in AST file

    Receiving error in 1.2.5 via SPM

    fatal error: module 'JVFloatLabeledTextField' in AST file '/Users/*/*/workspace/Release/derivedData/ModuleCache.noindex/2TPCFF7L9A4WB/JVFloatLabeledTextField-22NZXJB728SAC.pcm' (imported by AST file '/Users/*/*/workspace/Release/derivedData/Build/Intermediates.noindex/ArchiveIntermediates/MyApp/PrecompiledHeaders/MyApp-Bridging-Header-swift_LCZQBVBL1K6Z-clang_2TPCFF7L9A4WB.pch') is not defined in any loaded module map file; maybe you need to load '/Users/*/*/workspace/Release/derivedData/Build/Intermediates.noindex/ArchiveIntermediates/MyApp/IntermediateBuildFilesPath/GeneratedModuleMaps-iphoneos/JVFloatLabeledTextField.modulemap'?

    opened by accapps 1
  • Push latest changes to CocoaPods

    Push latest changes to CocoaPods

    CocoaPods.org list the latest version as 1.2.2, while GitHub shows version 1.2.5.

    https://github.com/jverdi/JVFloatLabeledTextField/releases https://cocoapods.org/pods/JVFloatLabeledTextField

    opened by vruzeda 0
  • Feature Request: Add support for multi-line floating labels and Dynamic Type

    Feature Request: Add support for multi-line floating labels and Dynamic Type

    The current version of the textField doesn't support Dynamic Type. To do this it would need to ensure that a scaled variant of a UIFont is used for the floating label (or opt-in somehow), can use numberOfLines == 0, word wraps and also sets adjustsFontForContentSizeCategory = YES.

    Typically a single line for the floating label is fine but when using Dynamic Type and especially in the larger Accessibility content sizes, a single line will truncate too much of the label - which should be fully visible to users at all times. So it ideally should be possible for it to span multiple lines. This causes layouts and constraints in the example project to break, the floating label overlaps with the textfield content and doesn't resize properly.
    I believe that the layouts shouldn't assume that the height of the floating label is equal to the _floatingLabel.font.lineHeight however just replacing that everywhere with _floatingLabel.frame.size.height doesn't correctly adjust the textfield content for the floating label. The example project also assumes that the textfield height is 44. I also tried to change this but was unsuccessful.

    Unfortunately, I've managed to get it working on an older version of the library but it's diverged too much from the current version to be able to create a PR.

    Simulator Screen Shot - iPod touch (7th generation) - 2021-05-26 at 10 12 48

    opened by parrotbait 0
  • How to disable Copy, Paste in a JVFloatLabeledTextField

    How to disable Copy, Paste in a JVFloatLabeledTextField

    I used JVFloatLabeledTextField in some secure field and want to disable copy, paste from storyboard. so no one can copy secure data. Is this functionality available in JVFloatLabeledTextField.

    opened by maheshshahu 0
  • Floating label active text color.

    Floating label active text color.

    I'm trying to implement text field "error" state by setting color to floatingLabelActiveTextColor and floatingLabelTextColor properties. Color of floating label sometimes not changing until field becomes first responder.

    opened by rodionov-andrei 0
  • CocoaPods and Carthage have different Swift imports

    CocoaPods and Carthage have different Swift imports

    Integrating project using Carthage to Swift project you importing

    import JVFloatLabeledText

    Using CocoaPods

    import JVFloatLabeledTextField

    Am I doing something wrong?

    The problem I am creating reusable component base on JVFloatLabeledTextField for project using both CocoaPods and Carthage for dependency management.

    opened by andriyslyusar 1
Releases(1.2.5)
Owner
Jared Verdi
sr mobile eng. manager for @behance at @adobe
Jared Verdi
Floating-textfield-swiftui - Floating textfield swiftui: Floating field with multiple icons

floating_textfield-swiftui Hey, Guys welcome to this tutorial. In this complete

Patrick 0 Jan 2, 2022
Floating-textfield-swiftui - Floating textfield With SwiftUI

floating_textfield-swiftui Hey, Guys welcome to this tutorial. In this complete

null 1 Feb 11, 2022
An UITextField subclass to simplify country code's picking. Swift 5.0

Preview Installation NKVPhonePicker is available through CocoaPods. To install it, simply add the following line to your Podfile: pod 'NKVPhonePicker'

Nike Kov 140 Nov 23, 2022
Animated Subclass of UITextField created with CABasicAnimation and CAShapeLayer

JDAnimatedTextField JDAnimatedTextField is animateable UITextField that can significantly enhance your user's experiences and set your app apart from

Jawad Ali 25 Dec 13, 2022
iOS - Subclass of UITextField to achieve autocompletion for Place Search like Google Places, Uber and Much more apps having maps.

MVAutocompletePlaceSearchTextField iOS - Subclass of UITextField to achieve autocompletion for Place Search like Google Places, Uber and Much more app

Mrugrajsinh Vansadia 68 May 27, 2022
Subclass of UITextField that shows inline suggestions while typing.

AutocompleteField Subclass of UITextField that shows inline suggestions while typing. Plug and play replacement for UITextField. Delimiter support. Pe

Filip Stefansson 663 Dec 6, 2022
UITextfield subclass with autocomplete menu. For iOS.

MLPAutoCompleteTextField "We believe that every tap a user makes drains a tiny bit of their energy and patience. Typing is one of the biggest expendit

Eddy Borja 1.2k Nov 11, 2022
UITextField subclass with autocompletion suggestions list

SearchTextField Overview SearchTextField is a subclass of UITextField, written in Swift that makes really easy the ability to show an autocomplete sug

Alejandro Pasccon 1.1k Dec 28, 2022
DTTextField is a custom textfield with floating placeholder and error label

DTTextField Introduction DTTextField is a UITextField library with floating placeholder and error label. Floating placeholder inspired from JVFloatLab

Dhaval Thanki 310 Jan 5, 2023
Floating Label TextField for SwiftUI. FloatingLabelTextFieldSwiftUI

FloatingLabelTextFieldSwiftUI FloatingLabelTextFieldSwiftUI is a small and lightweight SwiftUI framework written in completely swiftUI (not using UIVi

Kishan Raja 337 Jan 2, 2023
HTYTextField A UITextField with bouncy placeholder.

HTYTextField - A UITextField with bouncy placeholder. Screenshot Installation CocoaPods Add the dependency to your Podfile

Hanton Yang 312 Nov 13, 2022
Fully-wrapped UITextField made to work entirely in SwiftUI

iTextField โŒจ๏ธ A fully-wrapped `UITextField` that works entirely in SwiftUI. ?? Get Started | Examples | Customize | Install | Get Started Install iTex

Benjamin Sage 89 Jan 2, 2023
UITextField character counter with lovable UX ๐Ÿ’–. No math skills required ๐Ÿ™ƒ.

TextFieldCounter UITextField character counter with lovable UX ??. No math skills required ??. Features Set max length of UITextField. A beautiful an

Fabricio Serralvo 434 Dec 22, 2022
๐Ÿ„โ€โ™‚๏ธ UITextField-Navigation makes it easier to navigate between UITextFields and UITextViews

' __________________ _______ _________ _______ _________ _______ _ ______ ' |\ /|\__ __/\__ __/( ____ \|\ /

Thanh Pham 446 Nov 24, 2022
A floating label style for SwiftUI's TextField.

FloatingLabelTextFieldStyle A floating label style for TextField with support for displaying error messages. Requirements iOS 15.0+ macOS 12.0+ Instal

Red Davis 13 Aug 22, 2022
Animated UITextField enhance UX for the user by giving clarity that they are focused

JDCircularProgress JDTextField is animateable UITextField that can significantly enhance your user's experiences and set your app apart from the rest

Jawad Ali 22 Nov 17, 2022
This project will add a done button on your UITextField and UITextView

This project will add a done button on your UITextField and UITextView

Botla Venkatesh 0 Nov 23, 2021
This is the demo repository for having floating TextField in swift UI

ed-floating-field-swiftui This is the demo repository for having floating TextField in swift UI The inputs fields should not be empty Validations for

Patrick 1 May 26, 2022
UITextField category that adds shake animation

UITextField category that adds a shake animation like the password field of the OsX login screen. Screenshot Setup with CocoaPods pod 'UITextField+Sha

Andrea Mazzini 749 Dec 13, 2022