Text Input: Floating Labels

Floating labels are just like Stacked Labels, except that their labels animate, or "float" up when text is entered in the input. Each item should have item-floating-label assigned, and the input's label should have input-label assigned.

Enter text in the example to the right to see the floating labels in action. This example also uses the placeholder attribute so user's have a hint of what type of text the input is looking for.

<divclass="list"><labelclass="item item-input item-floating-label"><spanclass="input-label">First Name</span><inputtype="text"placeholder="First Name"></label><labelclass="item item-input item-floating-label"><spanclass="input-label">Last Name</span><inputtype="text"placeholder="Last Name"></label><labelclass="item item-input item-floating-label"><spanclass="input-label">Email</span><inputtype="text"placeholder="Email"></label></div>