Skip to content

Add option for always visible floating labels - #36155

Closed
mdo wants to merge 4 commits into
mainfrom
floating-always-visible
Closed

mdo wants to merge 4 commits into
mainfrom
floating-always-visible

Conversation

@mdo

@mdo mdo commented Apr 12, 2022

Copy link
Copy Markdown
Member

Fixes #36026.

Needs another pass to see if there's another selector I can use instead of a modifier class, but for now I think an explicit opt-in for this is the best route.

@mdo mdo added feature New feature, or a change to how an existing one works css Sass sources or compiled CSS v5 v5, the v5-dev branch labels Apr 12, 2022
@mdo
mdo requested a review from a team as a code owner April 12, 2022 20:07
louismaximepiton

This comment was marked as outdated.

@louismaximepiton

louismaximepiton commented Jun 27, 2023 •

Copy link
Copy Markdown
Member

Reviewing this PR months after the last one.

The context seems clearer to me right now. I took the liberty to add a commit to handle new things mentionned in the issue. Feel free to debate or revert 72ee1af.

My proposal here is to display the placeholder once the input is focused and try to better the solution to make it applicable on each scale.

@julien-deramond julien-deramond added the has-conflicts Conflicts with its base branch: needs a rebase label Oct 6, 2024
@julien-deramond julien-deramond removed the has-conflicts Conflicts with its base branch: needs a rebase label Sep 4, 2025
@julien-deramond

julien-deramond commented Sep 4, 2025 •

Copy link
Copy Markdown
Member

I haven't reviewed the PR but I did the following to help moving forward with it:

  • Rebased and resolved the conflicts. @mdo and @louismaximepiton I’ll let you both double-check the rendering as resolving the conflicts while keeping both your versions wasn’t easy, especially since floating labels had evolved in the main branch in the meantime 😬.
  • Changed the IDs to avoid docs compilation issues (8915efa)
  • Added the newly created mixins to the floating labels docs (8446581)

@mdo mdo moved this from Needs review to Ready to merge in v5.4.0 Sep 10, 2025
mdo added a commit that referenced this pull request Aug 13, 2026
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
@mdo

mdo commented Aug 13, 2026

Copy link
Copy Markdown
Member Author

Modernized for v6 in #42833 (tokens, label-first :has() markup, no separate Sass mixins). Closing this in favor of that PR.

@mdo mdo closed this Aug 13, 2026
@github-project-automation github-project-automation Bot moved this from Ready to merge to Done in v5.4.0 Aug 13, 2026
mdo added a commit that referenced this pull request Sep 29, 2026
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
mdo added a commit that referenced this pull request Sep 29, 2026
* 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

* fix(forms): mute date/time separators and dedupe docs

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.

* 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

* fix(forms): pass floating label CI checks

Use lint-compatible date, time, and select selectors while preserving
their matches. Raise the minified CSS budget to cover the new floating
label rules.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

css Sass sources or compiled CSS feature New feature, or a change to how an existing one works v5 v5, the v5-dev branch

Projects

Status: Done
Status: Needs review

Development

Successfully merging this pull request may close these issues.

Form-floating form-control doesn't display placeholder

3 participants