Float label pattern Axure library

A little while ago, I read a great post by Matt Smith about a UI pattern he developed to solve the problem of loss of context when completing input fields, while saving space and maintaing a clean look. His pattern is particularly relevant for mobile and tablet devices, but there is no reason why it can’t be used on desktop.

Matt Smith’s Float Label Pattern in action

The float label pattern appeals to me for the following reasons:

  1. it saves space by keeping the field label within the bounds of the field
  2. it maintains context by keeping the field label visible once you start typing
  3. it appeals to my inner obsessive-compulsive

So, I decided to implement the pattern as an Axure library, and make it available for download.

Axure implementation of the float label pattern

You can download the Axure library and also see it in action as an interactive Axure prototype

Using the Float Label Pattern Axure Library

When you import the library, you will see that it has three widgets. Functionally, they are identical and only differ by how the field borders are drawn. I think that the borderless version is probably most useful, as it allows you to draw your own borders to suit your own style.

Ignoring the borders, the Float Label widget consists of the following elements

  • userInput (text field) – this is the widget the user will type in
  • fieldLabel (dynamic panel) – shows the ‘in-field’ label. This is positioned behind the userInput text field
  • floatingLabel (dynamic panel) – initially hidden, this is where the field name is shown once you start typing

In order to change the field name, you only need to edit the fieldLabel element.

So, there it is – I hope you find it useful. I’d love to hear from people using it, so if you have any feedback or suggestions, get in touch via comments or on twitter

Migrating my old blog to Medium — originally published 18 Jan 2013

Show your support

Clapping shows how much you appreciated Vedran Arnautovic’s story.