Home

Awesome

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?