Add option for always visible floating labelsfloating-always-visible

2 files changed, 52 insertions, 10 deletions

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 4f9fd194b9..7bcc1e46f7 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -1,3 +1,15 @@
+// We use mixins instead of placeholders as placeholders would combine the selectors when @extend-ed
+
+@mixin form-floating-active-input-styles() {
+  padding-top: $form-floating-input-padding-t;
+  padding-bottom: $form-floating-input-padding-b;
+}
+
+@mixin form-floating-active-label-styles() {
+  opacity: $form-floating-label-opacity;
+  transform: $form-floating-label-transform;
+}
+
 .form-floating {
   position: relative;
 
@@ -30,19 +42,17 @@
 
     &:focus,
     &:not(:placeholder-shown) {
-      padding-top: $form-floating-input-padding-t;
-      padding-bottom: $form-floating-input-padding-b;
+      @include form-floating-active-input-styles();
     }
+
     // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
     &:-webkit-autofill {
-      padding-top: $form-floating-input-padding-t;
-      padding-bottom: $form-floating-input-padding-b;
+      @include form-floating-active-input-styles();
     }
   }
 
   > .form-select {
-    padding-top: $form-floating-input-padding-t;
-    padding-bottom: $form-floating-input-padding-b;
+    @include form-floating-active-input-styles();
   }
 
   > .form-control:focus,
@@ -50,15 +60,14 @@
   > .form-control-plaintext,
   > .form-select {
     ~ label {
-      opacity: $form-floating-label-opacity;
-      transform: $form-floating-label-transform;
+      @include form-floating-active-label-styles();
     }
   }
+
   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
   > .form-control:-webkit-autofill {
     ~ label {
-      opacity: $form-floating-label-opacity;
-      transform: $form-floating-label-transform;
+      @include form-floating-active-label-styles();
     }
   }
 
@@ -68,3 +77,21 @@
     }
   }
 }
+
+// Todo in v6: Consider combining this with the .form-control-plaintext rules to reduce some CSS?
+.form-floating-always {
+  > .form-control {
+    @include form-floating-active-input-styles();
+
+    &::placeholder {
+      color: $input-color;
+    }
+    &:focus::placeholder {
+      color: $input-placeholder-color;
+    }
+  }
+
+  > label {
+    @include form-floating-active-label-styles();
+  }
+}
diff --git a/site/content/docs/5.1/forms/floating-labels.md b/site/content/docs/5.1/forms/floating-labels.md
index a19bbdbfe9..58170525bd 100644
--- a/site/content/docs/5.1/forms/floating-labels.md
+++ b/site/content/docs/5.1/forms/floating-labels.md
@@ -90,6 +90,21 @@ Floating labels also support `.form-control-plaintext`, which can be helpful for
 </div>
 {{< /example >}}
 
+## Always floating
+
+Make any `.form-control` always use a floating label with visible placeholder with the `.form-floating-always` modifier class. Visible placeholders use the default input `color`  and lighten to the placeholder color on focus. This matches them with other floating labels built with plaintext inputs and selects.
+
+{{< example >}}
+<div class="form-floating form-floating-always mb-3">
+  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
+  <label for="floatingInput">Email address</label>
+</div>
+<div class="form-floating form-floating-always">
+  <input type="password" class="form-control" id="floatingPassword" placeholder="••••••••">
+  <label for="floatingPassword">Password</label>
+</div>
+{{< /example >}}
+
 ## Layout
 
 When working with the Bootstrap grid system, be sure to place form elements within column classes.