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 cfd40664c436deb07efaf730c9a66380663c4543..eead58a20013d7173f771165f45e729c446bf73f 100644 (file)
--- 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 041a4266648ab7d6847efb5603385ff8e236cba9..f781b34927e4afbd802cdda23eabe32dbdee89ae 100644 (file)
--- 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 ffc246016cf7d03657426ee0bdc91da5cb52daae..8779170616d4f80c41d72734e4340712e0b04583 100644 (file)
--- 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 fabf4ec1faa2e4c812ced95397b8d79b572c893f..a60cca4a62f3dce25f6098ece3ed43240ef42ac6 100644 (file)
--- 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 c458e4cd0ed50ebc4f5747a0457f038aebee8e38..32ba562c6c819e04a6d70d927679041562549203 100644 (file)
--- 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 863e75e22cb8dafc457f2e5daa4bd1e3c268d284..eebd53f3c1d5b116c7b31164f3f61f81216ab0b0 100644 (file)
--- 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 d52204db2eb5048c44a94f0134af8ac2408f9624..9221e3dfb1812f58f35738f6ab05c46c7576c62d 100644 (file)
--- 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>