From f0700c7c3cf0cc6268b76d5ffe3c9f1f3f7ad73a Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Fri, 1 Apr 2022 15:13:01 -0700
Subject: [PATCH 1/4] Add option for always visible floating labels

---
 scss/forms/_floating-labels.scss              | 43 +++++++++++++++----
 .../content/docs/forms/floating-labels.mdx    | 13 ++++++
 2 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 38df115561b8..66afa0a24b4c 100644
--- 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 dd2db0813e12..00748de95e93 100644
--- 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.

From 72ee1af96af50be9fdef664ea78bf124b387eaf9 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 27 Jun 2023 16:16:08 +0200
Subject: [PATCH 2/4] Proposal

---
 scss/forms/_floating-labels.scss | 46 +++++++++++++++++---------------
 scss/mixins/_forms.scss          | 12 +++++++++
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 66afa0a24b4c..ddda156511aa 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -1,14 +1,3 @@
-// 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;
 
@@ -47,6 +36,10 @@
       color: transparent;
     }
 
+    &:focus::placeholder {
+      color: $input-placeholder-color;
+    }
+
     &:focus,
     &:not(:placeholder-shown) {
       @include form-floating-active-input-styles();
@@ -69,6 +62,16 @@
   > .form-select {
     ~ label {
       @include form-floating-active-label-styles();
+
+      &::after {
+        position: absolute;
+        inset: $form-floating-padding-y ($form-floating-padding-x * .5);
+        z-index: -1;
+        height: $form-floating-label-height;
+        content: "";
+        background-color: $input-bg;
+        @include border-radius($input-border-radius);
+      }
     }
   }
   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
@@ -107,18 +110,19 @@
 
 // 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();
+  &.form-floating,
+  .form-floating {
+    .form-control {
+      @include form-floating-active-input-styles();
 
-    &::placeholder {
-      color: $input-color;
-    }
-    &:focus::placeholder {
-      color: $input-placeholder-color;
+      &::placeholder,
+      &:focus::placeholder {
+        color: $input-placeholder-color;
+      }
     }
-  }
 
-  > label {
-    @include form-floating-active-label-styles();
+    label {
+      @include form-floating-active-label-styles();
+    }
   }
 }
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 00b476413463..5f1d3a2081e7 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -1,6 +1,18 @@
 // This mixin uses an `if()` technique to be compatible with Dart Sass
 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
 
+// scss-docs-start form-floating-mixins
+@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() {
+  color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
+  transform: $form-floating-label-transform;
+}
+// scss-docs-end form-floating-mixins
+
 // scss-docs-start form-validation-mixins
 @mixin form-validation-state-selector($state) {
   @if ($state == "valid" or $state == "invalid") {

From 8915efae15a47faa6e0205796219df8ca4514184 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Thu, 4 Sep 2025 22:30:39 +0200
Subject: [PATCH 3/4] Fix docs compilation to avoid duplicate IDs

---
 site/src/content/docs/forms/floating-labels.mdx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/content/docs/forms/floating-labels.mdx b/site/src/content/docs/forms/floating-labels.mdx
index 00748de95e93..32129d5528f9 100644
--- a/site/src/content/docs/forms/floating-labels.mdx
+++ b/site/src/content/docs/forms/floating-labels.mdx
@@ -134,12 +134,12 @@ When using `.input-group` and `.form-floating` along with form validation, the `
 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>
+    <input type="email" class="form-control" id="alwaysFloatingInput" placeholder="name@example.com">
+    <label for="alwaysFloatingInput">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>
+    <input type="password" class="form-control" id="alwaysFloatingPassword" placeholder="••••••••">
+    <label for="alwaysFloatingPassword">Password</label>
   </div>`} />
 
 ## Layout

From 8446581c3d08c7ac0633e039aaf5e33084710925 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Thu, 4 Sep 2025 22:34:24 +0200
Subject: [PATCH 4/4] Add new Sass mixins to the documentation

---
 site/src/content/docs/forms/floating-labels.mdx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/site/src/content/docs/forms/floating-labels.mdx b/site/src/content/docs/forms/floating-labels.mdx
index 32129d5528f9..0d83ce385405 100644
--- a/site/src/content/docs/forms/floating-labels.mdx
+++ b/site/src/content/docs/forms/floating-labels.mdx
@@ -171,3 +171,9 @@ When working with the Bootstrap grid system, be sure to place form elements with
 ### Sass variables
 
 <ScssDocs name="form-floating-variables" file="scss/_variables.scss" />
+
+### Sass mixins
+
+<AddedIn version="5.4.0" />
+
+<ScssDocs name="form-floating-mixins" file="scss/mixins/_forms.scss" removeIndentation={false} />