diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 40a006a1c2a0..c781a9bb45f3 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 09101cdbbc94..f8748bf69272 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 3b86bf26c3cb..0614af4aff1d 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 cc8371462689..c53f084da79f 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 2ba5f23530a6..b562e3fc6682 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 74696c360943..5c73b380c18a 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 52cbc9325e92..403f5e462cb5 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 683195012fd6..cfd306d63eb7 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 e9b952af3174..effb951a4059 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 af8ad428c9a7..d90616851b10 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 af1f9c7c5f37..1fc561acfbf7 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 623800563a3a..90ea4ea319f9 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 ffd8f5671fb7..b25000601a63 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 d81e5badc12a..61db735a711e 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>