From: Mark Otto <markd.otto@gmail.com>
Date: Wed, 4 Mar 2026 17:20:39 +0000 (-0800)
Subject: Update control CSS vars (#42113)
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=7ac664465a575c19afc6cbe5d0c9b53295d08c90;p=thirdparty%2Fbootstrap.git

Update control CSS vars (#42113)

* Update input vars to be control vars

* Update radio, check, and switch to use new control vars

* bump bundle
---

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 40a006a1c2..c781a9bb45 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "40.75 kB"
+      "maxSize": "41.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
diff --git a/scss/_root.scss b/scss/_root.scss
index 09101cdbbc..f8748bf692 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -102,8 +102,14 @@ $root-tokens: defaults(
     // scss-docs-end root-focus-variables
 
     // scss-docs-start root-form-variables
-    --input-bg: var(--bg-body),
-    --input-color: var(--fg-body),
+    --control-bg: var(--bg-body),
+    --control-fg: var(--fg-body),
+    --control-checked-bg: var(--primary-base),
+    --control-checked-border-color: var(--control-checked-bg),
+    --control-active-bg: var(--primary-base),
+    --control-active-border-color: var(--control-active-bg),
+    --control-disabled-bg: var(--bg-3),
+    --control-disabled-opacity: .65,
 
     --btn-input-min-height: 2.375rem,
     --btn-input-padding-y: .375rem,
diff --git a/scss/forms/_check.scss b/scss/forms/_check.scss
index 3b86bf26c3..0614af4aff 100644
--- a/scss/forms/_check.scss
+++ b/scss/forms/_check.scss
@@ -17,14 +17,17 @@ $check-tokens: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $check-tokens: defaults(
   (
+    --check-size: 1rem,
     --check-bg: transparent,
     --check-border-color: var(--border-color),
-    --check-checked-bg: var(--primary-base),
-    --check-checked-border-color: var(--primary-base),
-    --check-indeterminate-bg: var(--primary-base),
-    --check-indeterminate-border-color: var(--primary-base),
-    --check-disabled-bg: var(--bg-3),
-    --check-disabled-opacity: .65,
+    --check-checked-bg: var(--control-checked-bg),
+    --check-checked-border-color: var(--control-checked-border-color),
+    --check-indeterminate-bg: var(--control-checked-bg),
+    --check-indeterminate-border-color: var(--control-checked-border-color),
+    --check-active-bg: var(--control-active-bg),
+    --check-active-border-color: var(--control-active-border-color),
+    --check-disabled-bg: var(--control-disabled-bg),
+    --check-disabled-opacity: var(--control-disabled-opacity),
   ),
   $check-tokens
 );
@@ -32,7 +35,7 @@ $check-tokens: defaults(
 // stylelint-enable custom-property-no-missing-var-function
 
 @layer forms {
-  b-checkgroup {
+  .checkgroup {
     display: flex;
     gap: var(--gap, .5rem);
     align-items: var(--align-items, start);
@@ -53,8 +56,8 @@ $check-tokens: defaults(
       flex-shrink: 0;
       grid-row-start: 1;
       grid-column-start: 1;
-      width: 1rem;
-      height: 1rem;
+      width: var(--check-size);
+      height: var(--check-size);
     }
 
     :where(input) {
@@ -63,7 +66,7 @@ $check-tokens: defaults(
       background-color: var(--theme-bg, var(--check-bg));
       border: 1px solid var(--theme-bg, var(--check-border-color));
       // stylelint-disable-next-line property-disallowed-list
-      border-radius: .25em;
+      border-radius: .3em;
     }
 
     :where(input:checked, input:indeterminate) {
@@ -78,7 +81,7 @@ $check-tokens: defaults(
     &:has(input:checked) .checked,
     &:has(input:indeterminate) .indeterminate {
       display: block;
-      color: var(--primary-contrast);
+      color: var(--theme-contrast, var(--primary-contrast));
       stroke: currentcolor;
     }
 
@@ -86,7 +89,7 @@ $check-tokens: defaults(
       --check-bg: var(--check-disabled-bg);
 
       ~ label {
-        color: var(--secondary-text);
+        color: var(--fg-3);
         cursor: default;
       }
     }
diff --git a/scss/forms/_chip-input.scss b/scss/forms/_chip-input.scss
index cc83714626..c53f084da7 100644
--- a/scss/forms/_chip-input.scss
+++ b/scss/forms/_chip-input.scss
@@ -67,7 +67,7 @@ $chip-input-tokens: defaults(
       opacity: 1;
 
       > .chip {
-        opacity: .65;
+        opacity: var(--control-disabled-opacity);
 
         .chip-dismiss {
           pointer-events: none;
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 2ba5f23530..b562e3fc66 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -105,7 +105,7 @@ $form-floating-tokens: defaults(
         z-index: -1;
         height: var(--form-floating-label-height);
         content: "";
-        background-color: var(--input-bg);
+        background-color: var(--control-bg);
         @include border-radius(var(--btn-input-border-radius));
       }
     }
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 74696c3609..5c73b380c1 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -24,8 +24,8 @@ $form-control-tokens: defaults(
     --control-padding-x: var(--btn-input-padding-x),
     --control-font-size: var(--btn-input-font-size),
     --control-line-height: var(--btn-input-line-height),
-    --control-color: var(--input-color),
-    --control-bg: var(--input-bg),
+    --control-color: var(--control-fg),
+    --control-bg: var(--control-bg),
     --control-border-width: var(--border-width),
     --control-border-color: var(--border-color),
     --control-border-radius: var(--border-radius),
diff --git a/scss/forms/_radio.scss b/scss/forms/_radio.scss
index 52cbc9325e..403f5e462c 100644
--- a/scss/forms/_radio.scss
+++ b/scss/forms/_radio.scss
@@ -17,12 +17,13 @@ $radio-tokens: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $radio-tokens: defaults(
   (
+    --radio-size: 1rem,
     --radio-bg: transparent,
     --radio-border-color: var(--border-color),
-    --radio-checked-bg: var(--primary-base),
-    --radio-checked-border-color: var(--primary-base),
-    --radio-disabled-bg: var(--bg-3),
-    --radio-disabled-opacity: .65,
+    --radio-checked-bg: var(--control-checked-bg),
+    --radio-checked-border-color: var(--control-checked-border-color),
+    --radio-disabled-bg: var(--control-disabled-bg),
+    --radio-disabled-opacity: var(--control-disabled-opacity),
   ),
   $radio-tokens
 );
@@ -30,7 +31,7 @@ $radio-tokens: defaults(
 // stylelint-enable custom-property-no-missing-var-function
 
 @layer forms {
-  b-radiogroup {
+  .radiogroup {
     display: flex;
     gap: var(--gap, .5rem);
     align-items: var(--align-items, start);
@@ -45,8 +46,8 @@ $radio-tokens: defaults(
 
     position: relative;
     flex-shrink: 0;
-    width: 1rem;
-    height: 1rem;
+    width: var(--radio-size);
+    height: var(--radio-size);
     margin-block: .125rem;
     appearance: none;
     background-color: var(--theme-bg, var(--radio-bg));
diff --git a/scss/forms/_switch.scss b/scss/forms/_switch.scss
index 683195012f..cfd306d63e 100644
--- a/scss/forms/_switch.scss
+++ b/scss/forms/_switch.scss
@@ -25,10 +25,10 @@ $switch-tokens: defaults(
     --switch-border-width: var(--border-width),
     --switch-border-color: var(--border-color),
     --switch-indicator-bg: var(--white),
-    --switch-checked-bg: var(--primary-base),
+    --switch-checked-bg: var(--control-checked-bg),
     --switch-checked-border-color: var(--switch-checked-bg),
     --switch-checked-indicator-bg: var(--white),
-    --switch-disabled-bg: var(--bg-3),
+    --switch-disabled-bg: var(--control-disabled-bg),
     --switch-disabled-indicator-bg: var(--fg-3),
   ),
   $switch-tokens
@@ -62,7 +62,7 @@ $switch-tokens: defaults(
       width: calc(var(--switch-height) - calc(var(--switch-padding) * 2) - var(--switch-border-width) * 2);
       height: calc(var(--switch-height) - calc(var(--switch-padding) * 2) - var(--switch-border-width) * 2);
       content: "";
-      background-color: var(--switch-indicator-bg);
+      background-color: var(--theme-contrast, var(--switch-indicator-bg));
       // stylelint-disable-next-line property-disallowed-list
       border-radius: 50%;
       box-shadow: 0 1px 2px rgba($black, .1);
diff --git a/site/src/components/shortcodes/StepperPlayground.astro b/site/src/components/shortcodes/StepperPlayground.astro
index e9b952af31..effb951a40 100644
--- a/site/src/components/shortcodes/StepperPlayground.astro
+++ b/site/src/components/shortcodes/StepperPlayground.astro
@@ -132,12 +132,12 @@ const stepCounts = [3, 4, 5, 6]
 
     <div class="vstack gap-1">
       <label class="form-label fw-semibold mb-0 user-select-none">&nbsp;</label>
-      <b-checkgroup class="py-2">
+      <div class="checkgroup py-2">
         <div class="switch">
           <input type="checkbox" value="" id="stepper-fullwidth" role="switch" switch>
         </div>
         <label for="stepper-fullwidth">Full width</label>
-      </b-checkgroup>
+      </div>
     </div>
   </div>
 </div>
diff --git a/site/src/content/docs/components/dropdown.mdx b/site/src/content/docs/components/dropdown.mdx
index af8ad428c9..d90616851b 100644
--- a/site/src/content/docs/components/dropdown.mdx
+++ b/site/src/content/docs/components/dropdown.mdx
@@ -273,16 +273,16 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
         <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
         <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
       </div>
-      <b-checkgroup>
+      <div class="checkgroup">
         <div class="check">
           <input type="checkbox" id="checkLabel" />
-          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m4 8 3 3 5-5'/>
+            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 8h6'/>
           </svg>
         </div>
         <label for="checkLabel">Example new checkbox</label>
-      </b-checkgroup>
+      </div>
       <div class="vstack gap-2">
         <button type="submit" class="btn-solid theme-primary">Sign in</button>
         <a class="btn-ghost theme-secondary" href="#">New around here? Sign up</a>
diff --git a/site/src/content/docs/forms/checkbox.mdx b/site/src/content/docs/forms/checkbox.mdx
index af1f9c7c5f..1fc561acfb 100644
--- a/site/src/content/docs/forms/checkbox.mdx
+++ b/site/src/content/docs/forms/checkbox.mdx
@@ -6,13 +6,6 @@ toc: true
 
 import { getData } from '@libs/data'
 
-**Trialing new components with the following rules:**
-
-- New components are purely components, they don't assume layout of any kind.
-- New options for form layout:
-  - Use new form groups to lay out your forms: `.control-group`, `.check-group`, `.radio-group`.
-  - Use helpers to lay out your forms—`.hstack` and `.vstack`—with utilities.
-
 ## Basic checkbox
 
 All checkbox styling is contained to a wrapper class, `.check`. This does the following:
@@ -27,9 +20,9 @@ Checkbox layout and labels are handled with additional HTML and CSS.
 
 <Example code={`<div class="check">
     <input type="checkbox" id="check" checked />
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
     </svg>
   </div>`} />
 
@@ -39,87 +32,89 @@ Checkboxes can utilize the indeterminate pseudo class when manually set via Java
 
 <Example addStackblitzJs class="bd-example-indeterminate" code={`<div class="check">
     <input type="checkbox" id="checkIndeterminate" />
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
     </svg>
   </div>`} />
 
 ## Label
 
-Wrap the `.check` in a `<b-checkgroup>` layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling.
+Wrap the `.check` in a `.checkgroup` layout wrapper and add your label. This sets some basic flexbox styling.
 
 Consider margin utilities for additional spacing, and flex utilities for alignment.
 
-<Example code={`<b-checkgroup>
+<Example code={`<div class="checkgroup">
     <div class="check">
       <input type="checkbox" id="checkLabel" />
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
       </svg>
     </div>
     <label for="checkLabel">Example new checkbox</label>
-  </b-checkgroup>`} />
+  </div>`} />
 
 ## Theme colors
 
 Modify the appearance of checked checkboxes by adding the `.theme-{color}` class to the `.check` element. This will set the checked background and border color to the theme color.
 
-<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<b-checkgroup>
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<div class="checkgroup">
     <div class="check theme-${themeColor.name}">
       <input type="checkbox" id="check${themeColor.name}" checked />
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
       </svg>
     </div>
     <label for="check${themeColor.name}">Example ${themeColor.name} checkbox</label>
-  </b-checkgroup>`)} />
+  </div>`)} />
 
 ## Description
 
 With this layout approach, you can easily add a description or other content after the label. Here we use another custom element, `<b-vstack>`, to stack the label and description.
 
-<Example code={`<b-checkgroup>
+<Example code={`<div class="checkgroup">
     <div class="check">
       <input type="checkbox" id="checkDescription" />
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
       </svg>
     </div>
     <b-vstack>
       <label for="checkDescription">Example new checkbox</label>
       <small class="description">Supporting description for the above label.</small>
     </b-vstack>
-  </b-checkgroup>`} />
+  </div>`} />
 
 ## Disabled
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
 
-<Example code={`<b-checkgroup>
+<Example code={`<div class="checkgroup">
     <div class="check">
       <input type="checkbox" id="checkDisabled" disabled />
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
       </svg>
     </div>
     <label for="checkDisabled">Example new checkbox</label>
-  </b-checkgroup>`} />
+  </div>`} />
+
+Applies to checked states, too.
 
-<Example code={`<b-checkgroup>
+<Example code={`<div class="checkgroup">
     <div class="check">
       <input type="checkbox" id="checkDisabledChecked" checked disabled />
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
       </svg>
     </div>
     <label for="checkDisabledChecked">Example new checkbox</label>
-  </b-checkgroup>`} />
+  </div>`} />
 
 ## CSS
 
diff --git a/site/src/content/docs/forms/radio.mdx b/site/src/content/docs/forms/radio.mdx
index 623800563a..90ea4ea319 100644
--- a/site/src/content/docs/forms/radio.mdx
+++ b/site/src/content/docs/forms/radio.mdx
@@ -14,43 +14,43 @@ Similar to checkboxes, radios are styled with the `.radio` class. However, there
 
 ## Label
 
-Wrap the `.radio` in a `<b-radiogroup>` layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling.
+Wrap the `.radio` in a `.radiogroup` layout wrapper and add your label. This sets some basic flexbox styling.
 
-<Example code={`<b-radiogroup>
+<Example code={`<div class="radiogroup">
     <input type="radio" id="radioLabel" class="radio" />
     <label for="radioLabel">Example new radio</label>
-  </b-radiogroup>`} />
+  </div>`} />
 
 ## Theme colors
 
 Modify the appearance of checked checkboxes by adding the `.theme-{color}` class to the `.radio` element. This will set the checked background and border color to the theme color.
 
-<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<b-radiogroup>
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<div class="radiogroup">
     <input type="radio" id="radio${themeColor.name}" class="radio theme-${themeColor.name}" checked />
     <label for="radio${themeColor.name}">Example ${themeColor.name} radio</label>
-  </b-radiogroup>`)} />
+  </div>`)} />
 
 ## Description
 
 With this layout approach, you can easily add a description or other content after the label. Here we use another custom element, `<b-vstack>`, to stack the label and description.
 
-<Example code={`<b-radiogroup>
+<Example code={`<div class="radiogroup">
     <input type="radio" id="radioLabelDescription" class="radio" />
     <b-vstack>
       <label for="radioLabelDescription">Example new radio</label>
       <small class="description">Supporting description for the above label.</small>
     </b-vstack>
-  </b-radiogroup>
+  </div>
   `} />
 
 ## Disabled
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
 
-<Example code={`<b-radiogroup>
+<Example code={`<div class="radiogroup">
     <input type="radio" id="radioDisabled" class="radio" disabled />
     <label for="radioDisabled">Example new radio</label>
-  </b-radiogroup>
+  </div>
   `} />
 
 ## CSS
diff --git a/site/src/content/docs/forms/switch.mdx b/site/src/content/docs/forms/switch.mdx
index ffd8f5671f..b25000601a 100644
--- a/site/src/content/docs/forms/switch.mdx
+++ b/site/src/content/docs/forms/switch.mdx
@@ -20,45 +20,45 @@ Switches also include the `switch` attribute for browsers that support it. This
 
 ## Label
 
-Wrap the `.switch` in a `<b-checkgroup>` layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling. Switches are checkboxes under the hood, so we reused the same custom element here.
+Wrap the `.switch` in a `.checkgroup` layout wrapper and add your label. This sets some basic flexbox styling. Switches are checkboxes under the hood, so we reuse the same layout class here.
 
 Consider margin utilities for additional spacing, and flex utilities for alignment, especially when using small or large switches.
 
-<Example class="d-flex flex-column gap-3" code={`<b-checkgroup>
+<Example class="d-flex flex-column gap-3" code={`<div class="checkgroup">
     <div class="switch switch-sm mt-1">
       <input type="checkbox" value="" id="switchSmLabel" role="switch" switch>
     </div>
     <label for="switchSmLabel">Small switch</label>
-  </b-checkgroup>
+  </div>
 
-  <b-checkgroup>
+  <div class="checkgroup">
     <div class="switch">
       <input type="checkbox" value="" id="switchMdLabel" role="switch" switch>
     </div>
     <label for="switchMdLabel">Default switch</label>
-  </b-checkgroup>`} />
+  </div>`} />
 
 ## Theme colors
 
 Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.switch` element. This will set the checked background and border color to the theme color.
 
-<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => ` <b-checkgroup>
-    <div class="switch switch-sm mt-1 checked-${themeColor.name}">
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => ` <div class="checkgroup">
+    <div class="switch switch-sm mt-1 theme-${themeColor.name}">
       <input type="checkbox" value="" id="switch${themeColor.name}" role="switch" switch checked>
     </div>
     <label for="switch${themeColor.name}">Example ${themeColor.name} switch</label>
-  </b-checkgroup>`)} />
+  </div>`)} />
 
 ## Disabled
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
 
-<Example class="d-flex flex-column gap-3" code={`<b-checkgroup>
+<Example class="d-flex flex-column gap-3" code={`<div class="checkgroup">
     <div class="switch">
       <input type="checkbox" value="" id="switchDisabledLabel" role="switch" switch disabled>
     </div>
     <label for="switchDisabledLabel">Disabled switch</label>
-  </b-checkgroup>`} />
+  </div>`} />
 
 ## Sizes
 
diff --git a/site/src/content/docs/getting-started/rtl.mdx b/site/src/content/docs/getting-started/rtl.mdx
index d81e5badc1..61db735a71 100644
--- a/site/src/content/docs/getting-started/rtl.mdx
+++ b/site/src/content/docs/getting-started/rtl.mdx
@@ -35,12 +35,12 @@ One line of changes to your HTML is all it takes to enable RTL. Bootstrap will t
 Toggle between LTR and RTL on this page to see Bootstrap's logical properties in action:
 
 <div class="bd-example">
-  <b-checkgroup>
+  <div class="checkgroup">
     <div class="switch">
       <input type="checkbox" value="" id="rtlSwitch" role="switch" switch />
     </div>
     <label for="rtlSwitch">Enable RTL mode</label>
-  </b-checkgroup>
+  </div>
 </div>
 
 <script>