From: Christian Oliff <christianoliff@pm.me>
Date: Mon, 20 Apr 2026 22:22:18 +0000 (+0900)
Subject: v6: docs: Replace .form-select with .form-control (#42332)
X-Git-Url: http://git.ipfire.org/gitweb/?a=commitdiff_plain;h=1ea05f87dcf596edad145c6826494bde359ef85f;p=thirdparty%2Fbootstrap.git

v6: docs: Replace .form-select with .form-control (#42332)
---

diff --git a/js/tests/visual/floating-label.html b/js/tests/visual/floating-label.html
index cfd40664c4..eead58a200 100644
--- a/js/tests/visual/floating-label.html
+++ b/js/tests/visual/floating-label.html
@@ -74,7 +74,7 @@
         <label for="floatingTextarea7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
       </div>
       <div class="form-floating">
-        <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
+        <select class="form-control" id="floatingSelect" aria-label="Floating label select example">
           <option selected>Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
@@ -83,7 +83,7 @@
         <label for="floatingSelect">Works with selects</label>
       </div>
       <div class="form-floating">
-        <select class="form-select is-invalid" id="floatingSelect1" aria-label="Floating label select example">
+        <select class="form-control is-invalid" id="floatingSelect1" aria-label="Floating label select example">
           <option selected>Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
@@ -92,7 +92,7 @@
         <label for="floatingSelect1">Works with selects</label>
       </div>
       <div class="form-floating">
-        <select class="form-select" id="floatingSelect2" aria-label="Floating label select example">
+        <select class="form-control" id="floatingSelect2" aria-label="Floating label select example">
           <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
@@ -101,7 +101,7 @@
         <label for="floatingSelect2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
       </div>
       <div class="form-floating">
-        <select class="form-select is-invalid" id="floatingSelect3" aria-label="Floating label select example">
+        <select class="form-control is-invalid" id="floatingSelect3" aria-label="Floating label select example">
           <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
@@ -122,7 +122,7 @@
         <label for="floatingTextareaDisabled1">Comments</label>
       </div>
       <div class="form-floating">
-        <select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
+        <select class="form-control" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
           <option selected>Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
@@ -143,7 +143,7 @@
         <label for="floatingTextareaDisabled3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
       </div>
       <div class="form-floating">
-        <select class="form-select" id="floatingSelectDisabled1" aria-label="Floating label disabled select example" disabled>
+        <select class="form-control" id="floatingSelectDisabled1" aria-label="Floating label disabled select example" disabled>
           <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
@@ -167,9 +167,9 @@
         <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput1" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
         <label for="floatingPlaintextInput1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
       </div>
-      <!--Compare form-select rendering depending on the size-->
+      <!--Compare form-control rendering depending on the size-->
       <div class="form-floating">
-        <select class="form-select" id="floatingSelectRegular" aria-label="Floating label select example">
+        <select class="form-control" id="floatingSelectRegular" aria-label="Floating label select example">
           <option selected="">Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
@@ -178,7 +178,7 @@
         <label for="floatingSelectRegular">Works with selects</label>
       </div>
       <div class="form-floating">
-        <select class="form-select form-select-sm" id="floatingSelectSmall" aria-label="Floating label select example">
+        <select class="form-control form-control-sm" id="floatingSelectSmall" aria-label="Floating label select example">
           <option selected="">Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
@@ -187,7 +187,7 @@
         <label for="floatingSelectSmall">Works with selects</label>
       </div>
       <div class="form-floating">
-        <select class="form-select form-select-lg" id="floatingSelectLarge" aria-label="Floating label select example">
+        <select class="form-control form-control-lg" id="floatingSelectLarge" aria-label="Floating label select example">
           <option selected="">Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
@@ -264,7 +264,7 @@
           <label for="floatingTextarea15">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
         </div>
         <div class="form-floating">
-          <select class="form-select" id="floatingSelect4" aria-label="Floating label select example">
+          <select class="form-control" id="floatingSelect4" aria-label="Floating label select example">
             <option selected>Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
@@ -273,7 +273,7 @@
           <label for="floatingSelect4">Works with selects</label>
         </div>
         <div class="form-floating">
-          <select class="form-select is-invalid" id="floatingSelect5" aria-label="Floating label select example">
+          <select class="form-control is-invalid" id="floatingSelect5" aria-label="Floating label select example">
             <option selected>Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
@@ -282,7 +282,7 @@
           <label for="floatingSelect5">Works with selects</label>
         </div>
         <div class="form-floating">
-          <select class="form-select" id="floatingSelect6" aria-label="Floating label select example">
+          <select class="form-control" id="floatingSelect6" aria-label="Floating label select example">
             <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
@@ -291,7 +291,7 @@
           <label for="floatingSelect6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
         </div>
         <div class="form-floating">
-          <select class="form-select is-invalid" id="floatingSelect7" aria-label="Floating label select example">
+          <select class="form-control is-invalid" id="floatingSelect7" aria-label="Floating label select example">
             <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
@@ -312,7 +312,7 @@
           <label for="floatingTextareaDisabled5">Comments</label>
         </div>
         <div class="form-floating">
-          <select class="form-select" id="floatingSelectDisabled2" aria-label="Floating label disabled select example" disabled>
+          <select class="form-control" id="floatingSelectDisabled2" aria-label="Floating label disabled select example" disabled>
             <option selected>Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
@@ -333,7 +333,7 @@
           <label for="floatingTextareaDisabled7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
         </div>
         <div class="form-floating">
-          <select class="form-select" id="floatingSelectDisabled3" aria-label="Floating label disabled select example" disabled>
+          <select class="form-control" id="floatingSelectDisabled3" aria-label="Floating label disabled select example" disabled>
             <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
@@ -357,9 +357,9 @@
           <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput3" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
           <label for="floatingPlaintextInput3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
         </div>
-        <!--Compare form-select rendering depending on the size-->
+        <!--Compare form-control rendering depending on the size-->
         <div class="form-floating">
-          <select class="form-select" id="floatingSelectRegularDark" aria-label="Floating label select example">
+          <select class="form-control" id="floatingSelectRegularDark" aria-label="Floating label select example">
             <option selected="">Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
@@ -368,7 +368,7 @@
           <label for="floatingSelectRegularDark">Works with selects</label>
         </div>
         <div class="form-floating">
-          <select class="form-select form-select-sm" id="floatingSelectSmallDark" aria-label="Floating label select example">
+          <select class="form-control form-control-sm" id="floatingSelectSmallDark" aria-label="Floating label select example">
             <option selected="">Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
@@ -377,7 +377,7 @@
           <label for="floatingSelectSmallDark">Works with selects</label>
         </div>
         <div class="form-floating">
-          <select class="form-select form-select-lg" id="floatingSelectLargeDark" aria-label="Floating label select example">
+          <select class="form-control form-control-lg" id="floatingSelectLargeDark" aria-label="Floating label select example">
             <option selected="">Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index 041a426664..f781b34927 100644
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -325,7 +325,7 @@ export const body_class = 'bg-body-tertiary'
           </div>
           <div class="mb-3">
             <label for="exampleSelect" class="form-label">Select menu</label>
-            <select class="form-select" id="exampleSelect">
+            <select class="form-control" id="exampleSelect">
               <option selected>Open this select menu</option>
               <option value="1">One</option>
               <option value="2">Two</option>
@@ -379,7 +379,7 @@ export const body_class = 'bg-body-tertiary'
             </div>
             <div class="mb-3">
               <label for="disabledSelect" class="form-label">Disabled select menu</label>
-              <select id="disabledSelect" class="form-select">
+              <select id="disabledSelect" class="form-control">
                 <option>Disabled select</option>
               </select>
             </div>
@@ -431,7 +431,7 @@ export const body_class = 'bg-body-tertiary'
           <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
         </div>
         <div class="mb-3">
-          <select class="form-select form-select-lg" aria-label=".form-select-lg example">
+          <select class="form-control form-control-lg" aria-label=".form-control-lg example">
             <option selected>Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
@@ -447,7 +447,7 @@ export const body_class = 'bg-body-tertiary'
           <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
         </div>
         <div class="mb-3">
-          <select class="form-select form-select-sm" aria-label=".form-select-sm example">
+          <select class="form-control form-control-sm" aria-label=".form-control-sm example">
             <option selected>Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
@@ -556,7 +556,7 @@ export const body_class = 'bg-body-tertiary'
           </div>
           <div class="md:col-3">
             <label for="validationServer04" class="form-label">State</label>
-            <select class="form-select is-invalid" id="validationServer04" required>
+            <select class="form-control is-invalid" id="validationServer04" required>
               <option selected disabled value="">Choose...</option>
               <option>...</option>
             </select>
diff --git a/site/src/assets/examples/checkout/index.astro b/site/src/assets/examples/checkout/index.astro
index ffc246016c..8779170616 100644
--- a/site/src/assets/examples/checkout/index.astro
+++ b/site/src/assets/examples/checkout/index.astro
@@ -117,7 +117,7 @@ export const body_class = 'bg-body-tertiary'
 
             <div class="md:col-5">
               <label for="country" class="form-label">Country</label>
-              <select class="form-select" id="country" required>
+              <select class="form-control" id="country" required>
                 <option value="">Choose...</option>
                 <option>United States</option>
               </select>
@@ -128,7 +128,7 @@ export const body_class = 'bg-body-tertiary'
 
             <div class="md:col-4">
               <label for="state" class="form-label">State</label>
-              <select class="form-select" id="state" required>
+              <select class="form-control" id="state" required>
                 <option value="">Choose...</option>
                 <option>California</option>
               </select>
diff --git a/site/src/assets/examples/menus/index.astro b/site/src/assets/examples/menus/index.astro
index fabf4ec1fa..a60cca4a62 100644
--- a/site/src/assets/examples/menus/index.astro
+++ b/site/src/assets/examples/menus/index.astro
@@ -181,7 +181,7 @@ export const extra_css = ['menus.css']
             <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-left-short"/></svg>
           </button>
           <strong class="cal-month-name">June</strong>
-          <select class="form-select cal-month-name d-none">
+          <select class="form-control cal-month-name d-none">
             <option value="January">January</option>
             <option value="February">February</option>
             <option value="March">March</option>
@@ -260,7 +260,7 @@ export const extra_css = ['menus.css']
             <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-left-short"/></svg>
           </button>
           <strong class="cal-month-name">June</strong>
-          <select class="form-select cal-month-name d-none">
+          <select class="form-control cal-month-name d-none">
             <option value="January">January</option>
             <option value="February">February</option>
             <option value="March">March</option>
diff --git a/site/src/content/docs/components/toasts.mdx b/site/src/content/docs/components/toasts.mdx
index c458e4cd0e..32ba562c6c 100644
--- a/site/src/content/docs/components/toasts.mdx
+++ b/site/src/content/docs/components/toasts.mdx
@@ -234,7 +234,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
 <Example addStackblitzJs code={`<form>
     <div class="mb-3">
       <label for="selectToastPlacement">Toast placement</label>
-      <select class="form-select mt-2" id="selectToastPlacement">
+      <select class="form-control mt-2" id="selectToastPlacement">
         <option value="" selected>Select a position...</option>
         <option value="top-0 start-0">Top left</option>
         <option value="top-0 start-50 translate-middle-x">Top center</option>
diff --git a/site/src/content/docs/forms/layout.mdx b/site/src/content/docs/forms/layout.mdx
index 863e75e22c..eebd53f3c1 100644
--- a/site/src/content/docs/forms/layout.mdx
+++ b/site/src/content/docs/forms/layout.mdx
@@ -79,7 +79,7 @@ More complex layouts can also be created with the grid system.
     </div>
     <div class="md:col-4">
       <label for="inputState" class="form-label">State</label>
-      <select id="inputState" class="form-select">
+      <select id="inputState" class="form-control">
         <option selected>Choose...</option>
         <option>...</option>
       </select>
@@ -213,7 +213,7 @@ The example below uses a flexbox utility to vertically center the contents and c
     </div>
     <div class="col-auto">
       <label class="visually-hidden" for="autoSizingSelect">Preference</label>
-      <select class="form-select" id="autoSizingSelect">
+      <select class="form-control" id="autoSizingSelect">
         <option selected>Choose...</option>
         <option value="1">One</option>
         <option value="2">Two</option>
@@ -249,7 +249,7 @@ You can then remix that once again with size-specific column classes.
     </div>
     <div class="sm:col-3">
       <label class="visually-hidden" for="specificSizeSelect">Preference</label>
-      <select class="form-select" id="specificSizeSelect">
+      <select class="form-control" id="specificSizeSelect">
         <option selected>Choose...</option>
         <option value="1">One</option>
         <option value="2">Two</option>
@@ -284,7 +284,7 @@ Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding
 
     <div class="col-12">
       <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
-      <select class="form-select" id="inlineFormSelectPref">
+      <select class="form-control" id="inlineFormSelectPref">
         <option selected>Choose...</option>
         <option value="1">One</option>
         <option value="2">Two</option>
diff --git a/site/src/content/docs/forms/overview.mdx b/site/src/content/docs/forms/overview.mdx
index d52204db2e..9221e3dfb1 100644
--- a/site/src/content/docs/forms/overview.mdx
+++ b/site/src/content/docs/forms/overview.mdx
@@ -68,7 +68,7 @@ However, if your form also includes custom button-like elements such as `<a clas
       </div>
       <div class="mb-3">
         <label for="disabledSelect" class="form-label">Disabled select menu</label>
-        <select id="disabledSelect" class="form-select">
+        <select id="disabledSelect" class="form-control">
           <option>Disabled select</option>
         </select>
       </div>