Merge branch 'twbs:main' into mainHEADmain

1 files changed, 81 insertions, 0 deletions

diff --git a/site/content/docs/5.3/forms/select.md b/site/content/docs/5.3/forms/select.md
new file mode 100644
index 000000000..c58fdf75e
--- /dev/null
+++ b/site/content/docs/5.3/forms/select.md
@@ -0,0 +1,81 @@
+---
+layout: docs
+title: Select
+description: Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
+group: forms
+toc: true
+---
+
+## Default
+
+Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`'s initial appearance and cannot modify the `<option>`s due to browser limitations.
+
+{{< example >}}
+<select class="form-select" aria-label="Default select example">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
+{{< /example >}}
+
+## Sizing
+
+You may also choose from small and large custom selects to match our similarly sized text inputs.
+
+{{< example >}}
+<select class="form-select form-select-lg mb-3" aria-label="Large select example">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
+
+<select class="form-select form-select-sm" aria-label="Small select example">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
+{{< /example >}}
+
+The `multiple` attribute is also supported:
+
+{{< example >}}
+<select class="form-select" multiple aria-label="Multiple select example">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
+{{< /example >}}
+
+As is the `size` attribute:
+
+{{< example >}}
+<select class="form-select" size="3" aria-label="Size 3 select example">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <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 >}}
+
+## CSS
+
+### Sass variables
+
+{{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}