root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 12 Packages Projects Releases Wiki Activity

Docs: enhance floating labels `placeholder` usage description

This commit is contained in:
Julien Déramond 2025-06-05 21:31:25 +02:00
parent 0a9fa30c82
commit f4fab0e6a4
No known key found for this signature in database
GPG Key ID: EE5F274EA1F477FA
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
site/src/content/docs/forms/floating-labels.mdx
View File

@ -6,7 +6,11 @@ toc: true
## Example ## Example
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 `placeholder` is required on each `<input>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also note that the `<input>` must come first so we can utilize a sibling selector (i.e., `~`). 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.
Also note that the `<input>` must come first so we can utilize a sibling selector (i.e., `~`).
<Example code={`<div class="form-floating mb-3"> <Example code={`<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">