From 0853778eba886a8ba7be09153df30e677402e69c Mon Sep 17 00:00:00 2001
From: Sebastian Podjasek <sebastian.podjasek@intelliway.pl>
Date: Tue, 8 Feb 2022 21:38:29 +0100
Subject: Support floating labels on `.form-control-plaintext` (#32840)

* Support floating labels on `.form-control-plaintext`

* Update floating-labels.md

* Apply suggestions from code review

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
---
 site/content/docs/5.1/forms/floating-labels.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

(limited to 'site/content/docs/5.1/forms')

diff --git a/site/content/docs/5.1/forms/floating-labels.md b/site/content/docs/5.1/forms/floating-labels.md
index 2ac675204..a19bbdbfe 100644
--- a/site/content/docs/5.1/forms/floating-labels.md
+++ b/site/content/docs/5.1/forms/floating-labels.md
@@ -75,6 +75,21 @@ Other than `.form-control`, floating labels are only available on `.form-select`
 </div>
 {{< /example >}}
 
+## Readonly plaintext
+
+Floating labels also support `.form-control-plaintext`, which can be helpful for toggling from an editable `<input>` to a plaintext value without affecting the page layout.
+
+{{< example >}}
+<div class="form-floating mb-3">
+  <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com">
+  <label for="floatingEmptyPlaintextInput">Empty input</label>
+</div>
+<div class="form-floating mb-3">
+  <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="name@example.com" value="name@example.com">
+  <label for="floatingPlaintextInput">Input with value</label>
+</div>
+{{< /example >}}
+
 ## Layout
 
 When working with the Bootstrap grid system, be sure to place form elements within column classes.
-- 
cgit v1.2.3