A web component that create a CSS-only floating label for
The syntax for generating a float-label input is as follows:
<field is="float-label" label="Your name" type="text" id="name" name="name" placeholder="Your name" tabindex="1"></field>
-The field tag and the is="float-label" are essential to creating the markup.
-You can customise the label and placeholder attributes as required.
-The type, id and name attributes should be included as best practice.
-Optionally add regular input attributes such as tabindex.
The above syntax will generate the following markup:
<field class="float-label"> <input type="text" id="name" name="name" placeholder="Your name" tabindex="1"> <label for="name">Your name</label> </field>
The float label pattern can be used for either desktop or mobile applications.
However it is most useful in mobile apps, where screen real estate becomes a premium. Recently designers have begun to omit the traditional form label in favor of using the placeholder text. This works fine, until the user clicks inside the field and the placeholder disappears and context is lost. The label tag is also an important feature for usability reasons.
The float label pattern gives the best of both worlds: removing the space taken up by labels whilst still providing important information and context for the user. As an added benefit, the lightweight CSS only animation gives further feedback to the user, helping the indicate the active field and improving UX, again especially for mobile where filling in fields can be tricky.
Initiated by and HTML/CSS by: Lyndel Thomas @ryndel
Converted to a web component by: Makis Tracend @tracend