Text entry controls which contain a built-in title/label so that you don't have to add a separate title for each field.

Last update: May 16, 2022

FloatLabelFields

Platform License Issues

Overview

FloatLabelFields is the Swift implementation of a UX pattern that has come to be known as the "Float Label Pattern". The initial Objective-C implementation of this pattern can be found on Github as JVFloatLabeledTextField.

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

Since the code is Swift-based, do note that this version of the component swill only work on iOS 7.x+.

Installation

You can install the FloatLabelField components two ways:

Via Interface Builder

Just add a UITextField or UITextView to your storyboard and then set the custom class for the control to either FloatLabelTextField or FloatLabelTextView.

Custom Class

Note: Sometimes, you might have to set the Module explicitly instead of letting Xcode set it implicitly too before it works.

Next, switch to the Attributes Inspector tab and set the necessary attributes to configure your text field or text view. The Placeholder attribute (or Hint in the case of a UITextView) defines the actual title which will be used for your field.

Properties

The other values such as Hint Y Padding, Title Y Padding, Title Text Colour etc. define how the title will look.

If everything is set up correctly, you'll see the title display on Interface Builder after you've configured the field.

Final Result

Via Code

Using FloatLabelFields via code works the same as you would do to set up a UITextField or UITextView instance. Simply create an instance of the class, set the necessary properties, and then add the field to your view.

let fld = FloatLabelTextField(frame:vwHolder.bounds)
fld.placeholder = "Comments"
vwHolder.addSubview(fld)

Credits

Additional References

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

Questions?

GitHub

https://github.com/FahimF/FloatLabelFields
Comments
  • 1. Summary of Change Log


    Update code to latest Swift 2.2 In FloatLabelTextField used the Nil Coalescing Operator to use a default value while checking the isEmpty property of the text variable.

    @FahimF Just thought to send the pull request. Hope this helps.

    Reviewed by sreejithkr at 2016-04-06 13:03
  • 2. Draw borders and fixed issue with font

    To changes: No user can set in IB if border lines will be used for each edge (Left, Right, Bottom, Up). And TextField loses his font configuration being set to title font when hideTitle is called. This issue is now fixed

    Reviewed by jfoc2009 at 2015-04-25 17:21
  • 3. Initializer does not override a designated initializer from its superclass

    I am using swift 1.2 UITextView's designated initializer is

        // Create a new text view with the specified text container (can be nil) - this is the new designated initializer for this class
        @availability(iOS, introduced=7.0)
        init(frame: CGRect, textContainer: NSTextContainer?)
    

    replace

        override init(frame:CGRect) {
            super.init(frame:frame)
            setup()
        }
    

    with

        override init(frame: CGRect, textContainer: NSTextContainer?) {
            super.init(frame: frame, textContainer: textContainer)
            setup()
        }
    
    Reviewed by landfound at 2015-04-14 01:28
  • 4. How to give cornerRadius to your class?

    I tried to set the corner radius for the textfield programatically. But its not affecting for your class field. Can you check and suggest? Thanks and Regards Aditya B

    Reviewed by adityabhave at 2017-10-12 06:48
  • 5. FloatLabelTextView hint label not moved up upon programmatically setting text

    If you set the text of the FloatLabelTextView programmatically in for example viewDidAppear, the hint label is not moved up, so the text overlaps the placeholder.

    textView.text = "Text"

    screen shot 2017-07-05 at 4 37 15 pm

    Reviewed by jordanhbuiltbyhq at 2017-07-05 22:37
A beautiful and flexible text field control implementation of "Float Label Pattern". Written in Swift.
A beautiful and flexible text field control implementation of

SkyFloatingLabelTextField SkyFloatingLabelTextField is a beautiful, flexible and customizable implementation of the space saving "Float Label Pattern"

Jun 24, 2022
Handles some of the base configuration to make creating a UIAlertController with text entry even easier. Plus validation!
Handles some of the base configuration to make creating a UIAlertController with text entry even easier. Plus validation!

?? FancyTextEntryController A simpler/easier API for adding text fields to UIAlertControllers. Not a custom view, just uses good ol' UIAlertController

Mar 31, 2022
Transition from any SwiftUI Text view into an inline navigation bar title when the view is scrolled off-screen, as seen in Apple's TV & TestFlight iOS apps.
Transition from any SwiftUI Text view into an inline navigation bar title when the view is scrolled off-screen, as seen in Apple's TV & TestFlight iOS apps.

SwiftUI Matched Inline Title Transition from any SwiftUI Text view into an inline navigation bar title when the view is scrolled off-screen, as seen i

Mar 21, 2022
AEOTPTextField - A beautiful iOS OTP Text Field library, written in Swift with full access customization in UI.
AEOTPTextField - A beautiful iOS OTP Text Field library, written in Swift with full access customization in UI.

AEOTPTextField - A beautiful iOS OTP Text Field library, written in Swift with full access customization in UI.

Jun 14, 2022
A SwiftUI TextField with a prompt (or placeholder) that floats above the text field when active or not empty. Requires iOS 15.
A SwiftUI TextField with a prompt (or placeholder) that floats above the text field when active or not empty. Requires iOS 15.

FloatingPromptTextField A prompt is the label in a text field that informs the user about the kind of content the text field expects. In a default Tex

May 31, 2022
Focus text field in SwiftUI dynamically and progress through form using iOS keyboard.
Focus text field in SwiftUI dynamically and progress through form using iOS keyboard.

Focuser Focuser allows to focus SwiftUI text fields dynamically and implements ability move go through the form using Keyboard for iOS 13 and iOS 14.

Jun 3, 2022
Autocomplete for a text field in SwiftUI using async/await
Autocomplete for a text field in SwiftUI using async/await

Autocomplete for a text field in SwiftUI using async/await

May 8, 2022
Currency text field formatter available for UIKit and SwiftUI πŸ’ΆβœοΈ
Currency text field formatter available for UIKit and SwiftUI πŸ’ΆβœοΈ

CurrencyText provides lightweight libraries for formating text field text as currency, available for both UIKit and SwiftUI. Its main core, the Curren

Jun 19, 2022
Changes the color of the label text when the button is pressed and also prints hello to the console
Changes the color of the label text when the button is pressed and also prints hello to the console

MY FIRST APP App Description This app changes the color of the label text when the button is pressed and also prints "hello" to the console. App Walk-

Nov 29, 2021
Easy-to-use token field that is used in the Venmo app.
Easy-to-use token field that is used in the Venmo app.

VENTokenField VENTokenField is the recipients token field that is used in the Venmo compose screen. Installation The easiest way to get started is to

Jun 5, 2022
Floating-textfield-swiftui - Floating textfield swiftui: Floating field with multiple icons
Floating-textfield-swiftui - Floating textfield swiftui: Floating field with multiple icons

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

Jan 2, 2022
DTTextField is a custom textfield with floating placeholder and error label
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

Jun 16, 2022
Floating Label TextField for SwiftUI. FloatingLabelTextFieldSwiftUI
Floating Label TextField for SwiftUI. FloatingLabelTextFieldSwiftUI

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

Jun 15, 2022
A floating label style for SwiftUI's TextField.
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

Jun 9, 2022
This project will add done button on TexField and TextViews by just turning on from storyboard.

RTDoneKeyboard Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Installation RTD

Oct 29, 2021
This project will add a done button on your UITextField and UITextView

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

Nov 23, 2021
SwiftUI TextEdit View - A proof-of-concept text edit component in SwiftUI & CoreText.
SwiftUI TextEdit View - A proof-of-concept text edit component in SwiftUI & CoreText.

A proof-of-concept text edit component in SwiftUI & CoreText. No UIKit, No AppKit, no UITextView/NSTextView/UITextField involved.

Dec 23, 2021
Render Markdown text in SwiftUI
Render Markdown text in SwiftUI

MarkdownUI MarkdownUI is a library for rendering Markdown in SwiftUI, fully compliant with the CommonMark Spec. Supported Platforms You can use the Ma

Jun 18, 2022
ExpandableText 😎 (SwiftUI) Expand the text with the "more" button
ExpandableText 😎 (SwiftUI) Expand the text with the

ExpandableText ?? (SwiftUI) Expand the text with the "more" button Get Started import SwiftUI import ExpandableText struct ExpandableText_Test: View

Jun 22, 2022