Breakdance4fun Logo

How to add Floating Labels to your forms

A floating label is a user interface design element where the label for an input field initially sits inside the input and then "floats" above the input when it is focused or contains text. This approach creates a clean and interactive form experience by dynamically moving the label to provide context without permanently occupying screen space.

Instructions

Select your Form Builder element and add this custom CSS. You may need to tweak the positioning to perfectly align the floating effect.

  1. The first rule tests if the input inside the form field is currently focused.
  2. The second rule checks if the input has user-entered content (not showing the placeholder).
  3. The third rule verifies if the input has a placeholder attribute with some text.
%%SELECTOR%% .breakdance-form-field label {
transform: translate(10px, 40px);
transition:.3s ease all;
background-color:var(--bde-background-color);
padding:0 5px;
}
%%SELECTOR%% .breakdance-form-field:has(.breakdance-form-field__input:focus) label,
%%SELECTOR%% .breakdance-form-field:has(.breakdance-form-field__input:not(:placeholder-shown)) label,
%%SELECTOR%% .breakdance-form-field:has(.breakdance-form-field__input[placeholder]:not([placeholder=""])) label{
transform:translate(5px,15px) scale(0.9)
}