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

Related tags

TextField & TextView FloatLabelFields
Overview

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?

Comments
  • Summary of Change Log

    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.

    opened by sreejithkr 1
  • Draw borders and fixed issue with font

    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

    opened by jfoc2009 1
  • Initializer does not override a designated initializer from its superclass

    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()
    }
    opened by landfound 1
  • How to give cornerRadius to your class?

    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

    opened by adityabhave 0
  • FloatLabelTextView hint label not moved up upon programmatically setting text

    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

    opened by jordanhbuiltbyhq 1
Owner
Fahim Farook
Fahim Farook
GitHub
A beautiful and flexible text field control implementation of "Float Label Pattern". Written in Swift.

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

Skyscanner 4k Jan 1, 2023
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

Christian Selig 22 Jul 18, 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.

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

Seb Jachec 19 Oct 9, 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.

Abdelrhman Kamal 79 Jan 3, 2023
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

Emilio Peláez 43 Nov 3, 2022
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.

Art Technologies 118 Dec 25, 2022
Autocomplete for a text field in SwiftUI using async/await

Autocomplete for a text field in SwiftUI using async/await

Dmytro Anokhin 13 Oct 21, 2022
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

Felipe Lefèvre Marino 183 Dec 15, 2022
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-

null 0 Nov 29, 2021
TTextField is developed to help developers can initiate a fully standard textfield including title, placeholder and error message in fast and convinient way without having to write many lines of codes

TTextField is developed to help developers can initiate a fully standard textfield including title, placeholder and error message in fast and convinient way without having to write many lines of codes

Nguyen Duc Thinh 7 Aug 28, 2022
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

Venmo 797 Dec 6, 2022
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
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
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
An `NSTextField` that specifies a maximum count after which text is highlighted to indicate an overflow

DSFMaxLengthDisplayTextField An NSTextField that specifies a maximum count after which text is highlighted to indicate an overflow Why? I always liked

Darren Ford 3 Aug 1, 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

Rahul Tiwari 0 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

Botla Venkatesh 0 Nov 23, 2021
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.

Marcin Krzyzanowski 80 Dec 1, 2022