Floating Labels and how to use them in your Joomla website - Copy

You may have seen them in form fields: labels that seem to float above the field as you're typing. Can you make those in your Joomla website as well? Yes you can! Brian Teeman explains how. 

What are Floating Labels?

Floating labels are a UI design pattern often used in form fields where the placeholder text for an input field moves or "floats" above the field as the user starts typing. This pattern was popularized by Google’s Material Design guidelines.

How Floating Labels Work:

• Initial State:
  The label appears as placeholder text inside the input field.
• Focused State:
  When the user clicks or focuses on the input, the placeholder text animates and moves above the input field.
• Filled State:
  After the user enters data, the label remains above the input field to provide context for the entered data.

Advantages of Floating Labels

• Space Efficiency:
  Combines the roles of placeholder text and field labels, reducing clutter and saving space.
• Improved Usability:
  Ensures context is always available (e.g., users can see what the field represents even after entering data).
• Enhanced Visual Appeal:
  Adds a polished and modern look to forms.
• Accessibility:
  Provides a better experience for screen readers and improves usability for visually impaired users, compared to placeholders that disappear on focus. The alternative is to hide the label using CSS and only make it visible to screen readers. (This is what Joomla does with the default login module).

Disadvantages of Floating Labels

• Cognitive Load:
  Users may initially find the transition distracting, especially if the animation is overly dramatic or not smooth.
• Complex Implementation:
  Requires creating a Joomla override. Floating labels are not possible with the default Joomla markup for fields. 
• Reduced Placeholder Functionality:
  Floating labels cannot provide detailed guidance or examples in the placeholder itself (e.g., "e.g., This email address is being protected from spambots. You need JavaScript enabled to view it.").
• Inconsistent Behaviour:
  If not designed well, users might confuse the floating label with entered data.

Joomla Implementation

The CSS for Bootstrap 5.3 (which is used by the Cassiopeia template) natively supports floating labels you just need to add the required CSS classes and structure the markup in the required order.