Every so often you come across something related to UI/UX that seems so simple, elegant, and obvious, that you can’t help but think “how did I not think of this?”. That’s how I felt when I stumbled on a new repository from my good friend Jared Verdi called JVFloatLabeledTextField, based on a design by Matt D. Smith. Naturally I wanted this in my own apps, so I decided to port it over to Xamarin.iOS.

The basic idea is that it’s a normal UITextField, except that when text is entered into it, the placeholder floats in above the field so the user can still see what the field is. If the text is removed, it fades away and returns to the normal placeholder:

You can find the class in my JVFloatSharp repository. Using the class is just as easy as using a normal UITextField:

var titleField = new JVFloatLabeledTextField(new RectangleF())
{
 	Placeholder = "Title",
	FloatingLabelFont = UIFont.BoldSystemFontOfSize(12),
	FloatingLabelTextColor = UIColor.Gray,
	FloatingLabelActiveTextColor = UIColor.Blue
};

There’s also a sample project included that mimics the image from above. Enjoy!