Add option for always visible floating labels

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 38df115561b898373bdaeae7083e4f58503437f6..66afa0a24b4c0b52e140a253b4dffdb161b9dfe5 100644 (file)
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -1,3 +1,14 @@
+// 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() {
+  transform: $form-floating-label-transform;
+}
+
 .form-floating {
   position: relative;
 
@@ -38,19 +49,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();
     padding-left: $form-floating-padding-x;
   }
 
@@ -59,13 +68,13 @@
   > .form-control-plaintext,
   > .form-select {
     ~ label {
-      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 {
-      transform: $form-floating-label-transform;
+      @include form-floating-active-label-styles();
     }
   }
   > textarea:focus,
@@ -95,3 +104,21 @@
     color: $form-floating-label-disabled-color;
   }
 }
+
+// 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/src/content/docs/forms/floating-labels.mdx b/site/src/content/docs/forms/floating-labels.mdx
index dd2db0813e1233844b64eae0d2a5c2edd7d355ef..00748de95e93a66fd4c2a2f403128e36986c8941 100644 (file)
--- a/site/src/content/docs/forms/floating-labels.mdx
+++ b/site/src/content/docs/forms/floating-labels.mdx
@@ -129,6 +129,19 @@ When using `.input-group` and `.form-floating` along with form validation, the `
     </div>
   </div>`} />
 
+## 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 code={`<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>`} />
+
 ## Layout
 
 When working with the Bootstrap grid system, be sure to place form elements within column classes.