v5: Add disabled examples for .form-control, .form-select, and .form-range (#31686)

* Add disabled state example to the .form-control page

* Document disabled attribute on select too

* Add disabled example for file input

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.0/forms/form-control.md
index 3f10138e99bbdf9040527c8663171278756526a7..0287a90d23d8d035a09420de845ebda75cd39b7f 100644 (file)
--- a/site/content/docs/5.0/forms/form-control.md
+++ b/site/content/docs/5.0/forms/form-control.md
@@ -29,6 +29,15 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
 <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
 {{< /example >}}
 
+## Disabled
+
+Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
+
+{{< example >}}
+<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
+<input class="form-control" type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
+{{< /example >}}
+
 ## Readonly
 
 Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

diff --git a/site/content/docs/5.0/forms/range.md b/site/content/docs/5.0/forms/range.md
index d1ca869bf89f54a6a50c257c7b3206db059f8c9c..7e95e0edff7f149a7d70ea206e7b2565dc79716d 100644 (file)
--- a/site/content/docs/5.0/forms/range.md
+++ b/site/content/docs/5.0/forms/range.md
@@ -15,6 +15,15 @@ Create custom `<input type="range">` controls with `.form-range`. The track (the
 <input type="range" class="form-range" id="customRange1">
 {{< /example >}}
 
+## Disabled
+
+Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
+
+{{< example >}}
+<label for="disabledRange" class="form-label">Disabled range</label>
+<input type="range" class="form-range" id="disabledRange" disabled>
+{{< /example >}}
+
 ## Min and max
 
 Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.

diff --git a/site/content/docs/5.0/forms/select.md b/site/content/docs/5.0/forms/select.md
index e8c62e8f3dce9bb7c808e567f4fd85a1f0f16766..e2b0bd6a81b7a6efbf27d35d8f166e350a6db7c6 100644 (file)
--- a/site/content/docs/5.0/forms/select.md
+++ b/site/content/docs/5.0/forms/select.md
@@ -60,3 +60,16 @@ As is the `size` attribute:
   <option value="3">Three</option>
 </select>
 {{< /example >}}
+
+## Disabled
+
+Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.
+
+{{< example >}}
+<select class="form-select" aria-label="Disabled select example" disabled>
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
+{{< /example >}}