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>

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.

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.

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 >}}