From 7a61f9ddc0a03ca636a6afd0a88d067fa2505641 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 12 Aug 2026 08:36:29 -0700
Subject: [PATCH 1/3] fix(forms): always float labels on date and time inputs

Date, time, datetime-local, month, and week inputs do not support
placeholders like text fields, so floating labels looked filled even
when empty and padding stayed inconsistent.

Keep those controls (and selects) in the floated label and padding
state, and document the behavior.

Fixes #39257
---
 js/tests/visual/floating-label.html           | 12 ++++++++
 scss/forms/_floating-labels.scss              | 29 ++++++++++++++++++-
 .../content/docs/forms/floating-labels.mdx    | 13 +++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/js/tests/visual/floating-label.html b/js/tests/visual/floating-label.html
index 4d993d9bca9e..c1085e14c438 100644
--- a/js/tests/visual/floating-label.html
+++ b/js/tests/visual/floating-label.html
@@ -109,6 +109,18 @@
           <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
         </select>
       </div>
+      <div class="form-floating">
+        <label for="floatingDate">Date</label>
+        <input type="date" class="form-control" id="floatingDate">
+      </div>
+      <div class="form-floating">
+        <label for="floatingTime">Time</label>
+        <input type="time" class="form-control" id="floatingTime">
+      </div>
+      <div class="form-floating">
+        <label for="floatingDatetime">Datetime local</label>
+        <input type="datetime-local" class="form-control" id="floatingDatetime">
+      </div>
       <div class="form-floating mb-3">
         <label for="floatingInputDisabled">Email address</label>
         <input type="email" class="form-control" id="floatingInputDisabled" placeholder="name@example.com" disabled>
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index fe5ec5ace793..1e9bc2c7cbda 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -91,12 +91,39 @@ $form-floating-tokens: defaults(
       }
     }
 
+    // Date and time inputs (and `<select>`) do not support `:placeholder-shown`
+    // the way textual inputs do, so keep their padding in the floated state.
+    // See https://github.com/twbs/bootstrap/issues/39257.
+    > :is(
+      .form-control:is(
+        [type="date"],
+        [type="month"],
+        [type="week"],
+        [type="time"],
+        [type="datetime-local"]
+      ),
+      select.form-control
+    ) {
+      padding-top: var(--form-floating-input-padding-t);
+      padding-bottom: var(--form-floating-input-padding-b);
+    }
+
     // The label precedes the control in the DOM so screen readers announce it
     // before the field's value, so we look forward with `:has()` to react to the
     // control's state (focus, value, disabled, etc.).
     > label:has(~ .form-control:focus),
     > label:has(~ .form-control:not(:placeholder-shown)),
-    > label:has(~ .form-control-plaintext) {
+    > label:has(~ .form-control-plaintext),
+    > label:has(~ :is(
+      .form-control:is(
+        [type="date"],
+        [type="month"],
+        [type="week"],
+        [type="time"],
+        [type="datetime-local"]
+      ),
+      select.form-control
+    )) {
       transform: var(--form-floating-label-transform);
     }
 
diff --git a/site/src/content/docs/forms/floating-labels.mdx b/site/src/content/docs/forms/floating-labels.mdx
index c648ad9fdb5b..13d89df4e91e 100644
--- a/site/src/content/docs/forms/floating-labels.mdx
+++ b/site/src/content/docs/forms/floating-labels.mdx
@@ -66,6 +66,19 @@ Select elements work in the same way, but unlike `<input>`s, they’ll always sh
     </select>
   </div>`} />
 
+## Date and time
+
+Date, time, datetime-local, month, and week inputs also always show the `<label>` in its floated state. These controls do not support placeholders the way textual inputs do, so a `placeholder` attribute is not required (and is ignored by most browsers on these types).
+
+<Example class="vstack gap-3" code={`<div class="form-floating">
+    <label for="floatingDate">Date</label>
+    <input type="date" class="form-control" id="floatingDate">
+  </div>
+  <div class="form-floating">
+    <label for="floatingTime">Time</label>
+    <input type="time" class="form-control" id="floatingTime">
+  </div>`} />
+
 ## Disabled
 
 Add the `disabled` boolean attribute on an input, a textarea or a select to give it a grayed out appearance, remove pointer events, and prevent focusing.

From f143add15218e0b1adde97ccb37add125d98dc01 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 12 Aug 2026 09:49:22 -0700
Subject: [PATCH 2/3] fix(forms): mute date/time separators and dedupe docs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Date and time inputs show hard `/` and `:` dividers that fight the
control’s muted placeholder look in WebKit and Blink.

Color those separators with the control placeholder token, and fold the
duplicate date and time docs section into one.
---
 scss/forms/_form-control.scss                |  5 +++++
 site/src/content/docs/forms/form-control.mdx | 17 ++---------------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index fc6af117d5eb..d2bb14af78fa 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -107,6 +107,11 @@ $form-control-sizes: defaults(
       padding: 0;
     }
 
+    // Soften `/` and `:` separators between date/time fields (WebKit/Blink only).
+    &::-webkit-datetime-edit-text {
+      color: var(--control-placeholder-color);
+    }
+
     // File inputs
     &[type="file"] {
       overflow: hidden; // prevent pseudo element button overlap
diff --git a/site/src/content/docs/forms/form-control.mdx b/site/src/content/docs/forms/form-control.mdx
index f52471ae5a3c..fcf8939f834c 100644
--- a/site/src/content/docs/forms/form-control.mdx
+++ b/site/src/content/docs/forms/form-control.mdx
@@ -230,9 +230,9 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
 
 Nearly all input types are supported, but not all are documented here. Input types requiring additional classes or changes are shown below.
 
-### Date and time
+### Date & Time
 
-No additional classes are needed for date and time inputs. Exact functionality and appearance are dependent on the browser and operating system.
+No additional classes are needed for date and time inputs. Exact functionality and appearance are dependent on the browser and operating system. However, you can also use [our datepicker component]([[docsref:/forms/datepicker]]) to create a more consistent experience across browsers with JavaScript.
 
 <Example class="vstack gap-3" code={`<input type="datetime-local" class="form-control" aria-label="Date and time picker" value="2026-02-24T13:00">
 <input type="datetime-local" class="form-control" aria-label="Date and time picker with seconds" value="2026-02-24T13:00:30" step="1">
@@ -288,19 +288,6 @@ You can also combine with the `.form-control-caret` class to add a caret to inpu
     <option value="Chicago">
   </datalist>`} />
 
-### Date & time
-
-No additional classes are needed for date and time inputs.
-
-<Example code={`<label for="exampleDateTimeInput" class="form-label">Date and time picker</label>
-<input type="datetime-local" class="form-control" id="exampleDateTimeInput" value="2026-02-24T13:00">`} />
-
-<Example code={`<label for="exampleDateInput" class="form-label">Date picker</label>
-<input type="date" class="form-control" id="exampleDateInput" value="2026-02-24">`} />
-
-<Example code={`<label for="exampleTimeInput" class="form-label">Time picker</label>
-<input type="time" class="form-control" id="exampleTimeInput" value="13:00">`} />
-
 ### File
 
 `input[type="file"]` elements are styled with the `::file-selector-button` pseudo element to add a button to the input. You only need to add the `.form-control` class, plus any size modifiers you need.

From 898a9561c333b8d2cd3eae2817d9f7cdb4717cfc Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 12 Aug 2026 19:12:08 -0700
Subject: [PATCH 3/3] feat(forms): add always-floating labels for v6

Port the always-visible floating label opt-in from #36155 to the v6
token and label-first :has() model.

Show placeholders on focus by default, and add .form-floating-always
to keep the label floated with a visible placeholder.

Supersedes #36155
---
 js/tests/visual/floating-label.html           |  8 ++++
 scss/forms/_floating-labels.scss              | 40 +++++++++++++++++++
 .../content/docs/forms/floating-labels.mdx    | 17 +++++++-
 3 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/js/tests/visual/floating-label.html b/js/tests/visual/floating-label.html
index c1085e14c438..5d51c58e80c0 100644
--- a/js/tests/visual/floating-label.html
+++ b/js/tests/visual/floating-label.html
@@ -121,6 +121,14 @@
         <label for="floatingDatetime">Datetime local</label>
         <input type="datetime-local" class="form-control" id="floatingDatetime">
       </div>
+      <div class="form-floating form-floating-always">
+        <label for="alwaysFloatingInput">Email address</label>
+        <input type="email" class="form-control" id="alwaysFloatingInput" placeholder="name@example.com">
+      </div>
+      <div class="form-floating form-floating-always">
+        <label for="alwaysFloatingPassword">Password</label>
+        <input type="password" class="form-control" id="alwaysFloatingPassword" placeholder="••••••••">
+      </div>
       <div class="form-floating mb-3">
         <label for="floatingInputDisabled">Email address</label>
         <input type="email" class="form-control" id="floatingInputDisabled" placeholder="name@example.com" disabled>
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 1e9bc2c7cbda..9a34c4c95758 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -79,6 +79,11 @@ $form-floating-tokens: defaults(
         color: transparent;
       }
 
+      // Show the placeholder once focused so the floated label has a hint.
+      &:focus::placeholder {
+        color: var(--control-placeholder-color);
+      }
+
       &:focus,
       &:not(:placeholder-shown) {
         padding-top: var(--form-floating-input-padding-t);
@@ -157,4 +162,39 @@ $form-floating-tokens: defaults(
       color: var(--form-floating-label-disabled-color);
     }
   }
+
+  // Opt in to an always-floated label with a visible placeholder. Works on the
+  // `.form-floating` itself or as a wrapper around one.
+  .form-floating-always {
+    &.form-floating,
+    .form-floating {
+      > .form-control {
+        padding-top: var(--form-floating-input-padding-t);
+        padding-bottom: var(--form-floating-input-padding-b);
+
+        &::placeholder,
+        &:focus::placeholder {
+          color: var(--control-placeholder-color);
+        }
+      }
+
+      > label {
+        transform: var(--form-floating-label-transform);
+      }
+
+      > label:has(~ textarea)::after {
+        position: absolute;
+        inset: var(--form-floating-padding-y) calc(var(--form-floating-padding-x) * .5);
+        z-index: -1;
+        height: var(--form-floating-label-height);
+        content: "";
+        background-color: var(--form-floating-label-bg);
+        @include border-radius(var(--btn-input-border-radius));
+      }
+
+      > label:has(~ textarea:disabled)::after {
+        background-color: var(--form-floating-label-disabled-bg);
+      }
+    }
+  }
 }
diff --git a/site/src/content/docs/forms/floating-labels.mdx b/site/src/content/docs/forms/floating-labels.mdx
index 13d89df4e91e..09b9a6a2bb1a 100644
--- a/site/src/content/docs/forms/floating-labels.mdx
+++ b/site/src/content/docs/forms/floating-labels.mdx
@@ -9,7 +9,7 @@ css_layer: forms
 
 Wrap a pair of `<input class="form-control">` and `<label>` elements in `.form-floating` to enable floating labels with Bootstrap’s textual form fields.
 
-A non-empty `placeholder` attribute is required on each `<input>` as our CSS-only floating label implementation relies on the `:placeholder-shown` pseudo-element to detect when the input is empty. The placeholder text itself is not visible; only the `<label>` is shown to users.
+A non-empty `placeholder` attribute is required on each `<input>` as our CSS-only floating label implementation relies on the `:placeholder-shown` pseudo-element to detect when the input is empty. The placeholder stays transparent until the control is focused, then uses the normal placeholder color. Only the `<label>` is shown when the field is empty and unfocused.
 
 Also note that the `<label>` must come first so that screen readers announce it before the field’s value; our CSS reacts to the control’s state with the `:has()` selector.
 
@@ -145,6 +145,21 @@ When using `.input-group` and `.form-floating` along with form validation, place
     </div>
   </div>`} />
 
+## Always floating
+
+Add `.form-floating-always` to keep the label floated and show the placeholder. Use it on the `.form-floating` itself or as a wrapper around one.
+
+<Example class="vstack gap-3" code={`<div class="form-floating form-floating-always">
+    <label for="alwaysFloatingInput">Email address</label>
+    <input type="email" class="form-control" id="alwaysFloatingInput" placeholder="name@example.com">
+  </div>
+  <div class="form-floating form-floating-always">
+    <label for="alwaysFloatingPassword">Password</label>
+    <input type="password" class="form-control" id="alwaysFloatingPassword" placeholder="••••••••">
+  </div>`} />
+
+By default, placeholders stay transparent until the control is focused. With `.form-floating-always`, the placeholder stays visible in both states.
+
 ## Layout
 
 When working with the Bootstrap grid system, be sure to place form elements within column classes.