Introducing the Free "Floating Label Input" plugin, fresh out of the oven!

Hey everyone, we are introducing a great and FREE plugin.

Basically, it’s an input field with an integrated label. This way, you don’t need to use a separate text element plus one other input field for your applications.

When you focus this input or when its value changes, the label within it undergoes a slight animation, moving it to the top, parallel to the top border of the input.

This avoids the use of text elements as labels, and improves the user experience (UX).

In addition, you define two colors: one for success and one for error. When the input is changed, focused, or when the value is valid, the success color is applied. When the value is invalid, the error color is applied.

See an example:

Mídia1 (1)

Main Features

  • You can define the content type as Text, Email, Password, Integer, Decimal, Date, Euro date, or Brazilian CPF.
  • If it is email, date, or Brazilian CPF, the plugin will check if the content is valid. If yes, it changes the exposed state “Is valid” to “yes”. If not, it changes to “no”.
  • Additionally, the plugin triggers the “Input Changed” event whenever the input value is changed.
    You also have access to the “Set Focus” action, which sets the focus on the desired input.

To check more information about the plugin, click here or access the official bubble link: Floating Label Input Pro Plugin | Bubble

2 Likes