Skip to content

Add option for always visible floating labels - #36155

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

Add option for always visible floating labels#36155
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.

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 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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