pfandrade / JVFloatLabeledTextField

UITextField subclass with floating labels - inspired by Matt D. Smith's design: http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

JVFloatLabeledTextField

Build Status Pod Version Pod Platform Pod License

JVFloatLabeledTextField is the first implementation 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

Currently, JVFloatLabeledTextField used alone is iOS 6+, but JVFloatLabeledTextView requires iOS 7 due to the use of UITextView's textContainer.

Additional References

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

Ports

JQuery / Zepto.js - Achmad Mahardi
Xamarin.iOS - Greg Shackles
Bootstrap plugin - Matt Powell
JavaFX - Andy Till
JQuery - Mike Mitchell
Android - Henrik Sandström

Added a port? Let me know - @jverdi

About

UITextField subclass with floating labels - inspired by Matt D. Smith's design: http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users

License:MIT License


Languages

Language:Objective-C 98.8%Language:Ruby 1.2%