diff --git a/.changeset/swift-teams-notice.md b/.changeset/swift-teams-notice.md
new file mode 100644
index 0000000000..4236c0f852
--- /dev/null
+++ b/.changeset/swift-teams-notice.md
@@ -0,0 +1,20 @@
+---
+"@patternfly/elements": major
+---
+
+✨ Added `<pf-v6-switch>` replacing `<pf-v5-switch>`. Switch now follows
+PatternFly v6 design specs.
+
+```html
+<pf-v6-switch checked>Wi-Fi</pf-v6-switch>
+```
+
+**Breaking Changes from v5**
+
+- Renamed tag from `<pf-v5-switch>` to `<pf-v6-switch>`
+- Removed `data-state="on|off"` label toggling — labels are now static, matching React and WCAG APG switch pattern
+- CSS custom properties renamed from `--pf-v5-c-switch--*` to `--pf-v6-c-switch--*`
+- Fixed form association (FACE): submits `"on"` when checked, reverts on form reset
+- ✨ Added cancelable `change` event: call `preventDefault()` to reject a toggle
+- ✨ Added external `<label for="id">` support
+- ✨ Added `reversed` attribute for reversed label/toggle layout
\ No newline at end of file
diff --git a/docs/framework-integration/react.md b/docs/framework-integration/react.md
index c6de196478..20f8185666 100644
--- a/docs/framework-integration/react.md
+++ b/docs/framework-integration/react.md
@@ -130,7 +130,7 @@ tags:
 
   import { Button } from "@patternfly/elements/react/pf-v5-button/pf-v5-button.js";
   import { Card } from "@patternfly/elements/react/pf-v5-card/pf-v5-card.js";
-  import { Switch } from "@patternfly/elements/react/pf-v5-switch/pf-v5-switch.js";
+  import { Switch } from "@patternfly/elements/react/pf-v6-switch/pf-v6-switch.js";
   import { Popover } from "@patternfly/elements/react/pf-v5-popover/pf-v5-popover.js";
   import { Tooltip } from "@patternfly/elements/react/pf-v5-tooltip/pf-v5-tooltip.js";
 
@@ -160,7 +160,7 @@ tags:
 
   ### Switch
 
-  Now we have a card and a button component, let's add [`pf-v5-switch`][pf-v5-switch] 
+  Now we have a card and a button component, let's add [`pf-v6-switch`][pf-v6-switch] 
   web component in our app. We will enable/disable the decrement button by 
   clicking on the Switch button.
 
@@ -355,7 +355,7 @@ tags:
 [vite]: https://vitejs.dev/guide/#scaffolding-your-first-vite-project
 [pf-v5-button]: https://patternflyelements.org/components/button/
 [pf-v5-card]: https://patternflyelements.org/components/card/
-[pf-v5-switch]: https://patternflyelements.org/components/switch/
+[pf-v6-switch]: https://patternflyelements.org/components/switch/
 [pf-v5-tooltip]: https://patternflyelements.org/components/tooltip/
 [pf-v5-popover]: https://patternflyelements.org/components/popover/
 [inng]: https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-angular-app-4b18b1c9c363
diff --git a/elements/pf-v5-accordion/demo/bordered.html b/elements/pf-v5-accordion/demo/bordered.html
index 4b143f510c..47048286ea 100644
--- a/elements/pf-v5-accordion/demo/bordered.html
+++ b/elements/pf-v5-accordion/demo/bordered.html
@@ -1,7 +1,7 @@
 <article>
   <header>
     <h2>Bordered</h2>
-    <pf-v5-switch id="toggle-size" name="toggle-size"></pf-v5-switch>
+    <pf-v6-switch id="toggle-size" name="toggle-size"></pf-v6-switch>
     <label for="toggle-size" data-state="on">Size: Large</label>
     <label for="toggle-size" data-state="off">Size: Normal</label>
   </header>
@@ -57,7 +57,7 @@ <h3>Item five</h3>
 <script type="module">
   import '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 
   const bordered = document.getElementById('bordered-example');
   const toggle = document.getElementById('toggle-size');
diff --git a/elements/pf-v5-accordion/test/pf-accordion.spec.ts b/elements/pf-v5-accordion/test/pf-accordion.spec.ts
index a7390b1be9..940f94222b 100644
--- a/elements/pf-v5-accordion/test/pf-accordion.spec.ts
+++ b/elements/pf-v5-accordion/test/pf-accordion.spec.ts
@@ -5,7 +5,7 @@ import { a11ySnapshot, querySnapshot } from '@patternfly/pfe-tools/test/a11y-sna
 
 // Import the element we're testing.
 import { PfV5Accordion, PfV5AccordionPanel, PfV5AccordionHeader } from '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
-import { PfV5Switch } from '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+import { PfV5Switch } from '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
@@ -1357,14 +1357,14 @@ describe('<pf-v5-accordion>', function() {
           <pf-v5-accordion>
             <pf-v5-accordion-header expanded id="header-1-1" data-index="0"></pf-v5-accordion-header>
             <pf-v5-accordion-panel id="panel-1-1" data-index="0">
-              <pf-v5-switch></pf-v5-switch>
+              <pf-v6-switch></pf-v6-switch>
               <input type="checkbox">
             </pf-v5-accordion-panel>
           </pf-v5-accordion>
         `);
       panels = document.querySelectorAll('pf-v5-accordion-panel');
       checkbox = element.querySelector('input')!;
-      pfswitch = element.querySelector('pf-v5-switch')!;
+      pfswitch = element.querySelector('pf-v6-switch')!;
       expect(checkbox).to.be.ok;
       expect(pfswitch).to.be.ok;
       [accordionPanelOne] = panels;
diff --git a/elements/pf-v5-button/demo/form-control.html b/elements/pf-v5-button/demo/form-control.html
index 4d0c31d113..ff1a09f053 100644
--- a/elements/pf-v5-button/demo/form-control.html
+++ b/elements/pf-v5-button/demo/form-control.html
@@ -3,8 +3,8 @@ <h2>Nothing disabled</h2>
   <fieldset>
     <pf-v5-button>Ok</pf-v5-button>
   </fieldset>
-  <label>Fieldset Disabled <pf-v5-switch name="fieldset"></pf-v5-switch> </label>
-  <label>Button Disabled <pf-v5-switch name="button"></pf-v5-switch> </label>
+  <label>Fieldset Disabled <pf-v6-switch name="fieldset"></pf-v6-switch> </label>
+  <label>Button Disabled <pf-v6-switch name="button"></pf-v6-switch> </label>
 </form>
 
 <form>
@@ -12,8 +12,8 @@ <h2>fieldset disabled</h2>
   <fieldset disabled>
     <pf-v5-button>Ok</pf-v5-button>
   </fieldset>
-  <label>Fieldset Disabled <pf-v5-switch name="fieldset" checked></pf-v5-switch> </label>
-  <label>Button Disabled <pf-v5-switch name="button"></pf-v5-switch> </label>
+  <label>Fieldset Disabled <pf-v6-switch name="fieldset" checked></pf-v6-switch> </label>
+  <label>Button Disabled <pf-v6-switch name="button"></pf-v6-switch> </label>
 </form>
 
 <form>
@@ -21,8 +21,8 @@ <h2>Button disabled</h2>
   <fieldset>
     <pf-v5-button disabled>Ok</pf-v5-button>
   </fieldset>
-  <label>Fieldset Disabled <pf-v5-switch name="fieldset"></pf-v5-switch> </label>
-  <label>Button Disabled <pf-v5-switch name="button" checked></pf-v5-switch> </label>
+  <label>Fieldset Disabled <pf-v6-switch name="fieldset"></pf-v6-switch> </label>
+  <label>Button Disabled <pf-v6-switch name="button" checked></pf-v6-switch> </label>
 </form>
 
 <form>
@@ -30,12 +30,12 @@ <h2>Both disabled</h2>
   <fieldset disabled>
     <pf-v5-button disabled>Ok</pf-v5-button>
   </fieldset>
-  <label>Fieldset Disabled <pf-v5-switch name="fieldset" checked></pf-v5-switch> </label>
-  <label>Button Disabled <pf-v5-switch name="button" checked></pf-v5-switch> </label>
+  <label>Fieldset Disabled <pf-v6-switch name="fieldset" checked></pf-v6-switch> </label>
+  <label>Button Disabled <pf-v6-switch name="button" checked></pf-v6-switch> </label>
 </form>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
 
   for (const form of document.querySelectorAll('form')) {
diff --git a/elements/pf-v5-card/demo/modifiers.html b/elements/pf-v5-card/demo/modifiers.html
index a564146119..85f9a21124 100644
--- a/elements/pf-v5-card/demo/modifiers.html
+++ b/elements/pf-v5-card/demo/modifiers.html
@@ -1,21 +1,21 @@
 <section>
   <form id="card-settings">
-    <pf-v5-switch id="flat" data-attribute="flat"></pf-v5-switch>
+    <pf-v6-switch id="flat" data-attribute="flat"></pf-v6-switch>
     <label for="flat">Flat</label>
 
-    <pf-v5-switch id="rounded" data-attribute="rounded"></pf-v5-switch>
+    <pf-v6-switch id="rounded" data-attribute="rounded"></pf-v6-switch>
     <label for="rounded">Rounded</label>
 
-    <pf-v5-switch id="plain" data-attribute="plain"></pf-v5-switch>
+    <pf-v6-switch id="plain" data-attribute="plain"></pf-v6-switch>
     <label for="plain">Plain</label>
 
-    <pf-v5-switch id="full-height" data-attribute="full-height"></pf-v5-switch>
+    <pf-v6-switch id="full-height" data-attribute="full-height"></pf-v6-switch>
     <label for="full-height">Full Height</label>
 
-    <pf-v5-switch id="size-compact" data-attribute="size" data-value="compact"></pf-v5-switch>
+    <pf-v6-switch id="size-compact" data-attribute="size" data-value="compact"></pf-v6-switch>
     <label for="size-compact">Compact</label>
 
-    <pf-v5-switch id="size-large" data-attribute="size" data-value="large"></pf-v5-switch>
+    <pf-v6-switch id="size-large" data-attribute="size" data-value="large"></pf-v6-switch>
     <label for="size-large">Large</label>
   </form>
 
@@ -32,13 +32,13 @@ <h2 slot="header">Lightest card</h2>
 <script type="module">
   import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 
   const form = document.getElementById('card-settings');
   const card = document.querySelector('pf-v5-card');
 
   form.addEventListener('change', async function(event) {
-    await Promise.all(Array.from(document.querySelectorAll('pf-v5-switch'), x => x.updateComplete));
+    await Promise.all(Array.from(document.querySelectorAll('pf-v6-switch'), x => x.updateComplete));
     const { checked } = event.target;
     const { attribute, value } = event.target.dataset;
     switch (attribute) {
diff --git a/elements/pf-v5-dropdown/demo/custom-toggle.html b/elements/pf-v5-dropdown/demo/custom-toggle.html
index 6de7d42d54..ab0fba45e9 100644
--- a/elements/pf-v5-dropdown/demo/custom-toggle.html
+++ b/elements/pf-v5-dropdown/demo/custom-toggle.html
@@ -3,7 +3,7 @@
     <em>Note:</em> When using a custom toggle, you must slot in a <code>pf-v5-dropdown-menu</code>.
   </small>
   <span id="switch-group">
-    <pf-v5-switch id="disable-all"></pf-v5-switch>
+    <pf-v6-switch id="disable-all"></pf-v6-switch>
     <label for="disable-all"><span data-state="on">Enable</span><span data-state="off">Disable</span> all dropdowns</label>
   </span>
 </p>
@@ -113,7 +113,7 @@
 
 <script type="module">
   import '@patternfly/elements/pf-v5-dropdown/pf-v5-dropdown.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   const sw = document.getElementById('disable-all')
   sw.addEventListener('click', function() {
     document.querySelectorAll('main pf-v5-dropdown').forEach(x => x.disabled = sw.checked);
diff --git a/elements/pf-v5-jump-links/demo/scrollspy-with-subsections.html b/elements/pf-v5-jump-links/demo/scrollspy-with-subsections.html
index c2288fba4f..575b6d498b 100644
--- a/elements/pf-v5-jump-links/demo/scrollspy-with-subsections.html
+++ b/elements/pf-v5-jump-links/demo/scrollspy-with-subsections.html
@@ -2,7 +2,7 @@
   <header>
     <h2>Main title</h2>
 
-    <pf-v5-switch id="is-vertical" checked></pf-v5-switch>
+    <pf-v6-switch id="is-vertical" checked></pf-v6-switch>
     <label for="is-vertical" data-state="on">Vertical</label>
     <label for="is-vertical" data-state="off">Horizontal</label>
   </header>
@@ -142,12 +142,12 @@ <h2 id="heading-5">Heading 5</h2>
 </div>
 
 <script type="module">
-import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 import '@patternfly/elements/pf-v5-jump-links/pf-v5-jump-links.js';
 
 const main = document.getElementById('demo');
 const links = document.querySelector('pf-v5-jump-links');
-const swtch = document.querySelector('pf-v5-switch');
+const swtch = document.querySelector('pf-v6-switch');
 const media = matchMedia('(max-width: 600px)');
 
 function sumHeights(...elements) {
@@ -230,8 +230,8 @@ <h2 id="heading-5">Heading 5</h2>
 }
 
 
-pf-v5-switch + label,
-pf-v5-switch + label + label {
+pf-v6-switch + label,
+pf-v6-switch + label + label {
   margin-inline-start: 12px;
 }
 </style>
diff --git a/elements/pf-v5-progress-stepper/demo/alignment.html b/elements/pf-v5-progress-stepper/demo/alignment.html
index dc91e3c9a8..0977b442f3 100644
--- a/elements/pf-v5-progress-stepper/demo/alignment.html
+++ b/elements/pf-v5-progress-stepper/demo/alignment.html
@@ -1,7 +1,7 @@
 <form id="alignment">
   <h2>With alignment</h2>
-  <label><pf-v5-switch name="vertical"></pf-v5-switch> Vertical alignment</label>
-  <label><pf-v5-switch name="center"></pf-v5-switch> Center alignment</label>
+  <label><pf-v6-switch name="vertical"></pf-v6-switch> Vertical alignment</label>
+  <label><pf-v6-switch name="center"></pf-v6-switch> Center alignment</label>
   <pf-v5-progress-stepper name="progress">
     <pf-v5-progress-step description="This is the first thing to happen" variant="success">First Step</pf-v5-progress-step>
     <pf-v5-progress-step description="This is the second thing to happen" variant="info" current>Second Step</pf-v5-progress-step>
@@ -10,7 +10,7 @@ <h2>With alignment</h2>
 </form>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
 
   document.querySelector('form').addEventListener('change', /** @this{HTMLFormElement}*/ function onChange() {
@@ -21,7 +21,7 @@ <h2>With alignment</h2>
 
 <style>
   form,
-  label pf-v5-switch {
+  label pf-v6-switch {
     padding-inline: .5rem;
   }
 
diff --git a/elements/pf-v5-progress-stepper/demo/compact.html b/elements/pf-v5-progress-stepper/demo/compact.html
index cb251bbfbe..59d5eaf1da 100644
--- a/elements/pf-v5-progress-stepper/demo/compact.html
+++ b/elements/pf-v5-progress-stepper/demo/compact.html
@@ -1,7 +1,7 @@
 <form id="compact">
   <h2>Compact</h2>
-  <label><pf-v5-switch name="vertical"></pf-v5-switch> Vertical alignment</label>
-  <label><pf-v5-switch name="center"></pf-v5-switch> Center alignment</label>
+  <label><pf-v6-switch name="vertical"></pf-v6-switch> Vertical alignment</label>
+  <label><pf-v6-switch name="center"></pf-v6-switch> Center alignment</label>
   <pf-v5-progress-stepper name="progress" compact>
     <pf-v5-progress-step variant="success">First Step</pf-v5-progress-step>
     <pf-v5-progress-step variant="info" current>Second Step</pf-v5-progress-step>
@@ -10,7 +10,7 @@ <h2>Compact</h2>
 </form>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
 
   document.querySelector('form').addEventListener('change', /** @this{HTMLFormElement}*/ function onChange() {
@@ -21,7 +21,7 @@ <h2>Compact</h2>
 
 <style>
   form,
-  label pf-v5-switch {
+  label pf-v6-switch {
     padding-inline: .5rem;
   }
 
diff --git a/elements/pf-v5-progress-stepper/demo/info.html b/elements/pf-v5-progress-stepper/demo/info.html
index 666f160588..c233482761 100644
--- a/elements/pf-v5-progress-stepper/demo/info.html
+++ b/elements/pf-v5-progress-stepper/demo/info.html
@@ -9,7 +9,7 @@
 </section>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
 
   document.querySelector('form').addEventListener('change', /** @this{HTMLFormElement}*/ function onChange() {
@@ -20,7 +20,7 @@
 
 <style>
   form,
-  label pf-v5-switch {
+  label pf-v6-switch {
     padding-inline: .5rem;
   }
 
diff --git a/elements/pf-v5-switch/README.md b/elements/pf-v5-switch/README.md
deleted file mode 100644
index 88c6f973b0..0000000000
--- a/elements/pf-v5-switch/README.md
+++ /dev/null
@@ -1,88 +0,0 @@
-# PatternFly Elements Switch
-     
-`<pf-v5-switch>` is a switch that toggles the state of a setting (between on and 
-off). Switches provide a more explicit, visible representation on a setting.
-
-Read more about Switch in the [PatternFly Elements Switch documentation](https://patternflyelements.org/components/switch)
-
-##  Installation
-
-Load `<pf-v5-switch>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-v5-switch/pf-v5-switch.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-```
-
-## Usage
-```html
-<pf-v5-switch id="switch"></pf-v5-switch>
-<label for="switch" data-state="on">Message when on</label>
-<label for="switch" data-state="off" hidden>Message when off</label>
-```
-
-### Form Associated
-
-`<pf-v5-switch>` is a form-associated custom element. That means that it can
-participate in HTML forms just like a native `<input>`. For example, if you add
-the `name` attribute, or the `id` attribute, the element will appear in the
-FormData object. For example, if you add the `name` attribute, or the `id`
-attribute, the element will appear in the `FormData` object.
-
-```html
-<form>
-  <label> Dark Mode
-    <pf-v5-switch name="dark"></pf-v5-switch>
-  </label>
-  <script>
-  document.currentScript.closest('form').addEventListener('submit', function() {
-    console.log(this.elements.dark) // <pf-v5-switch>
-  })
-  </script>
-</form>
-```
-
-
-### Without label
-
-```html
-<pf-v5-switch></pf-v5-switch>
-```
-
-### Checked with label
-
-```html
-<pf-v5-switch show-check-icon></pf-v5-switch>
-<label for="switch" data-state="on">Message when on</label>
-<label for="switch" data-state="off" hidden>Message when off</label>
-```
-
-### Disabled Switches
-
-```html
-<form>
-  <fieldset>
-    <legend>Checked and Disabled</legend>
-    <pf-v5-switch id="checked-disabled" checked disabled></pf-v5-switch>
-    <label for="checked-disabled" data-state="on">Message when on</label>
-    <label for="checked-disabled" data-state="off">Message when off</label>
-  </fieldset>
-
-  <fieldset>
-    <pf-v5-switch id="disabled" disabled></pf-v5-switch>
-    <label for="disabled" data-state="on">Message when on</label>
-    <label for="disabled" data-state="off">Message when off</label>
-  </fieldset>
-</form>
-```
diff --git a/elements/pf-v5-switch/demo/checked.html b/elements/pf-v5-switch/demo/checked.html
deleted file mode 100644
index e8030bdc47..0000000000
--- a/elements/pf-v5-switch/demo/checked.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<section>
-  <form>
-    <fieldset>
-      <legend>Checked with label</legend>
-      <pf-v5-switch id="checked" checked show-check-icon></pf-v5-switch>
-      <label for="checked">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>
-    </fieldset>
-  </form>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-  import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-
-  fieldset {
-    display: grid;
-    grid-template-columns: min-content max-content;
-    gap: var(--pf-v5-c-switch--ColumnGap, var(--pf-v5-c-switch__label--PaddingLeft, 1rem));
-    &:has(#reversed) {
-      grid-template-columns: max-content min-content;
-    }
-  }
-
-  label {
-    color: var(--pf-v5-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-  }
-
-  pf-v5-switch:not([checked]) ~ label,
-  label:has(~ pf-v5-switch:not([checked])) {
-    color: var(--pf-v5-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
-  }
-</style>
diff --git a/elements/pf-v5-switch/demo/disabled.html b/elements/pf-v5-switch/demo/disabled.html
deleted file mode 100644
index e98fb3150a..0000000000
--- a/elements/pf-v5-switch/demo/disabled.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<section>
-  <form>
-    <fieldset>
-      <legend>Checked and Disabled</legend>
-      <pf-v5-switch id="checked-disabled" checked disabled></pf-v5-switch>
-      <label for="checked-disabled">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>
-    </fieldset>
-    <fieldset>
-      <pf-v5-switch id="default-disabled" disabled></pf-v5-switch>
-      <label for="default-disabled">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>
-    </fieldset>
-  </form>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-
-  fieldset {
-    display: grid;
-    grid-template-columns: min-content max-content;
-    gap: var(--pf-v5-c-switch--ColumnGap, var(--pf-v5-c-switch__label--PaddingLeft, 1rem));
-    &:has(#reversed) {
-      grid-template-columns: max-content min-content;
-    }
-  }
-
-  label {
-    color: var(--pf-v5-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-  }
-
-  pf-v5-switch:not([checked]) ~ label,
-  label:has(~ pf-v5-switch:not([checked])) {
-    color: var(--pf-v5-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
-  }
-</style>
diff --git a/elements/pf-v5-switch/demo/index.html b/elements/pf-v5-switch/demo/index.html
deleted file mode 100644
index 405dcee752..0000000000
--- a/elements/pf-v5-switch/demo/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<section>
-  <p>A switch toggles the state of a setting (between on and off). Switches provide a more explicit, visible representation on a setting.</p>
-  <form>
-    <fieldset id="fieldset-a">
-      <legend>Option A</legend>
-      <pf-v5-switch id="a" checked></pf-v5-switch>
-      <label for="a">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>
-    </fieldset>
-
-    <fieldset id="fieldset-b">
-      <legend>Option B (no explicit label)</legend>
-      <pf-v5-switch id="b" checked></pf-v5-switch>
-    </fieldset>
-
-    <fieldset id="form-disabled">
-      <legend>Form Disabled State</legend>
-      <pf-v5-switch id="disable-a" aria-controls="fieldset-a"></pf-v5-switch>
-      <label for="disable-a">
-        <span data-state="on">Fieldset A is disabled</span>
-        <span data-state="off" hidden>Fieldset A is enabled</span>
-      </label>
-
-      <pf-v5-switch id="disable-a-switch" aria-controls="a"></pf-v5-switch>
-      <label for="disable-a-switch">
-        <span data-state="on">Fieldset A is disabled</span>
-        <span data-state="off" hidden>Fieldset A is enabled</span>
-      </label>
-
-      <pf-v5-switch id="disable-b" aria-controls="fieldset-b"></pf-v5-switch>
-      <label for="disable-b">
-        <span data-state="on">Fieldset B is disabled</span>
-        <span data-state="off" hidden>Fieldset B is enabled</span>
-      </label>
-
-      <pf-v5-switch id="disable-b-switch" aria-controls="b"></pf-v5-switch>
-      <label for="disable-b-switch">
-        <span data-state="on">Switch B is disabled</span>
-        <span data-state="off" hidden>Switch B is enabled</span>
-      </label>
-    </fieldset>
-  </form>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-  import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-
-  document.getElementById('form-disabled').addEventListener('change', /** @this{HTMLFieldsetElement}*/function(event) {
-    const controls = document.getElementById(event.target.getAttribute('aria-controls'));
-    controls.toggleAttribute('disabled', event.target.checked);
-  });
-</script>
-
-<style>
-  section {
-    margin: 2rem;
-  }
-
-  fieldset {
-    display: grid;
-    grid-template-columns: min-content max-content;
-    gap: var(--pf-v5-c-switch--ColumnGap, var(--pf-v5-c-switch__label--PaddingLeft, 1rem));
-  }
-
-  fieldset:has(#reversed) {
-    grid-template-columns: max-content min-content;
-  }
-
-  label {
-    color: var(--pf-v5-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-  }
-
-  pf-v5-switch:not([checked]) ~ label,
-  label:has(~ pf-v5-switch:not([checked])) {
-    color: var(--pf-v5-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
-  }
-</style>
diff --git a/elements/pf-v5-switch/demo/nested-in-label.html b/elements/pf-v5-switch/demo/nested-in-label.html
deleted file mode 100644
index 82e4754267..0000000000
--- a/elements/pf-v5-switch/demo/nested-in-label.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<section>
-  <form id="nested-label">
-    <fieldset>
-      <legend>Nested in a label</legend>
-      <label> Status
-        <pf-v5-switch name="status"></pf-v5-switch>
-      </label>
-      <pf-v5-button type="submit">Submit</pf-v5-button>
-      <output>Submit to read status</output>
-    </fieldset>
-  </form>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-  import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-
-  document.getElementById('nested-label').addEventListener('submit', /** @this {HTMLFormElement} */function(event) {
-    event.preventDefault();
-    this.querySelector('output').textContent = `Dark mode ${this.elements.status.checked ? 'on' : 'off'}`;
-  });
-</script>
-
-<style>
-  section {
-    padding: 1em;
-  }
-
-  fieldset {
-    display: grid;
-    grid-template-columns: min-content max-content;
-    gap: var(--pf-v5-c-switch--ColumnGap, var(--pf-v5-c-switch__label--PaddingLeft, 1rem));
-    &:has(#reversed) {
-      grid-template-columns: max-content min-content;
-    }
-  }
-
-  label {
-    color: var(--pf-v5-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-  }
-
-  pf-v5-switch:not([checked]) ~ label,
-  label:has(~ pf-v5-switch:not([checked])) {
-    color: var(--pf-v5-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
-  }
-
-  #nested-label fieldset {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-
-  #nested-label output {
-    width: 100%;
-  }
-</style>
diff --git a/elements/pf-v5-switch/demo/reversed.html b/elements/pf-v5-switch/demo/reversed.html
deleted file mode 100644
index 555faa3aa1..0000000000
--- a/elements/pf-v5-switch/demo/reversed.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<section>
-  <form>
-    <fieldset>
-      <legend>Reversed</legend>
-      <label for="reversed">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>
-      <pf-v5-switch id="reversed" reversed></pf-v5-switch>
-    </fieldset>
-  </form>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-  import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-</script>
-
-<style>
-  section {
-    margin: 2rem;
-  }
-
-  fieldset {
-    display: grid;
-    grid-template-columns: min-content max-content;
-    gap: var(--pf-v5-c-switch--ColumnGap, var(--pf-v5-c-switch__label--PaddingLeft, 1rem));
-  }
-
-  fieldset:has(#reversed) {
-    grid-template-columns: max-content min-content;
-  }
-
-  label {
-    color: var(--pf-v5-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-  }
-
-  pf-v5-switch:not([checked]) ~ label,
-  label:has(~ pf-v5-switch:not([checked])) {
-    color: var(--pf-v5-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
-  }
-</style>
diff --git a/elements/pf-v5-switch/demo/without-label.html b/elements/pf-v5-switch/demo/without-label.html
deleted file mode 100644
index ef89b2986b..0000000000
--- a/elements/pf-v5-switch/demo/without-label.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<section>
-  <form>
-    <fieldset>
-      <legend>Without label</legend>
-      <pf-v5-switch accessible-label="Toggle option" checked></pf-v5-switch>
-    </fieldset>
-  </form>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-  import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-</script>
-
-<style>
-  section {
-    margin: 2rem;
-  }
-
-  fieldset {
-    display: grid;
-    grid-template-columns: min-content max-content;
-    gap: var(--pf-v5-c-switch--ColumnGap, var(--pf-v5-c-switch__label--PaddingLeft, 1rem));
-  }
-
-  fieldset:has(#reversed) {
-    grid-template-columns: max-content min-content;
-  }
-
-  label {
-    color: var(--pf-v5-c-switch__label--Color, var(--pf-global--Color--dark-100, #151515));
-  }
-
-  pf-v5-switch:not([checked]) ~ label,
-  label:has(~ pf-v5-switch:not([checked])) {
-    color: var(--pf-v5-c-switch__input--not-checked__label--Color, var(--pf-global--disabled-color--100, #6a6e73));
-  }
-</style>
diff --git a/elements/pf-v5-switch/docs/CHANGELOG.old.md b/elements/pf-v5-switch/docs/CHANGELOG.old.md
deleted file mode 100644
index a3024c9e08..0000000000
--- a/elements/pf-v5-switch/docs/CHANGELOG.old.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# @patternfly/pfe-switch
-
-## 2.0.0-next.0
-
-### Major Changes
-
-- 4400866a: Added `<pfe-switch>`, a control that toggles the state of a setting between on and off.
-  Switches provide a more explicit, visible representation on a setting than checkboxes.
-
-  ```html
-  <form>
-    <pfe-switch id="color-scheme-toggle"></pfe-switch>
-    <label for="color-scheme-toggle" data-state="on">Dark Mode</label>
-    <label for="color-scheme-toggle" data-state="off" hidden>Light Mode</label>
-  </form>
-  ```
-
-### Patch Changes
-
-- dc34cf51: Prevented clicks and other interactions when the switch is disabled
diff --git a/elements/pf-v5-switch/docs/pf-v5-switch.md b/elements/pf-v5-switch/docs/pf-v5-switch.md
deleted file mode 100644
index b65872d7e3..0000000000
--- a/elements/pf-v5-switch/docs/pf-v5-switch.md
+++ /dev/null
@@ -1,70 +0,0 @@
-{% renderInstallation %} {% endrenderInstallation %}
-
-{% renderOverview %}
-  A switch toggles the state of a setting (between on and off). Switches 
-  provide a more explicit, visible representation on a setting.
-
-  <pf-v5-switch id="overview-switch" checked></pf-v5-switch>
-  <label for="overview-switch">
-    <span data-state="on">Message when on</span>
-    <span data-state="off" hidden>Message when off</span>
-  </label>
-{% endrenderOverview %}
-
-{% band header="Usage" %}
-  ### Basic
-  {% htmlexample %}
-  <pf-v5-switch id="color-scheme-toggle"></pf-v5-switch>
-  <label for="color-scheme-toggle">
-    <span data-state="on">Message when on</span>
-    <span data-state="off" hidden>Message when off</span>
-  </label>  
-  {% endhtmlexample %}
-
-  ### Without label
-  {% htmlexample %}
-  <pf-v5-switch></pf-v5-switch>
-  {% endhtmlexample %}
-
-  ### Checked with label
-  {% htmlexample %}
-  <pf-v5-switch id="checked" checked show-check-icon></pf-v5-switch>
-  <label for="checked">
-    <span data-state="on">Message when on</span>
-    <span data-state="off" hidden>Message when off</span>
-  </label>    
-  {% endhtmlexample %}
-
-  ### Disabled
-  {% htmlexample %}
-  <form>
-    <fieldset>
-      <legend>Checked and Disabled</legend>
-      <pf-v5-switch id="checked-disabled" checked disabled></pf-v5-switch>
-      <label for="checked-disabled">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>      
-    </fieldset>
-    <fieldset>
-      <pf-v5-switch id="default-disabled" disabled></pf-v5-switch>
-      <label for="default-disabled">
-        <span data-state="on">Message when on</span>
-        <span data-state="off" hidden>Message when off</span>
-      </label>        
-    </fieldset>
-  </form>
-  {% endhtmlexample %}
-{% endband %}
-
-{% renderSlots %}{% endrenderSlots %}
-
-{% renderAttributes %}{% endrenderAttributes %}
-
-{% renderMethods %}{% endrenderMethods %}
-
-{% renderEvents %}{% endrenderEvents %}
-
-{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
-
-{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v5-switch/docs/screenshot.png b/elements/pf-v5-switch/docs/screenshot.png
deleted file mode 100644
index b38283146d..0000000000
Binary files a/elements/pf-v5-switch/docs/screenshot.png and /dev/null differ
diff --git a/elements/pf-v5-switch/pf-v5-switch.css b/elements/pf-v5-switch/pf-v5-switch.css
deleted file mode 100644
index 5f44607921..0000000000
--- a/elements/pf-v5-switch/pf-v5-switch.css
+++ /dev/null
@@ -1,154 +0,0 @@
-:host {
-  display: inline-block;
-  outline: none;
-}
-
-svg {
-  fill: currentcolor;
-}
-
-[hidden] {
-  display: none !important;
-}
-
-:host([checked]) #container {
-  /** Color of the label when switch is checked */
-  color: var(--pf-v5-c-switch__input--checked__label--Color,
-    var(--pf-global--Color--dark-100, #151515));
-  /** Background color of the toggle when switch is checked */
-  background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor,
-    var(--pf-global--primary-color--100, #06c));
-}
-
-:host([checked]) #container::before {
-  /** Translation of the toggle knob when checked */
-  translate: var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX,
-    calc(100% + var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem)));
-}
-
-:host(:is(:focus,:focus-within)) #container {
-  /** Focus outline width */
-  outline: var(--pf-v5-c-switch__input--focus__toggle--OutlineWidth,
-    var(--pf-global--BorderWidth--md, 2px)) solid var(--pf-v5-c-switch__input--focus__toggle--OutlineColor,
-      var(--pf-global--primary-color--100, #06c));
-  /** Focus outline offset */
-  outline-offset: var(--pf-v5-c-switch__input--focus__toggle--OutlineOffset,
-    var(--pf-global--spacer--sm, 0.5rem));
-}
-
-:host(:disabled) {
-  pointer-events: none;
-  cursor: not-allowed;
-}
-
-:host(:disabled) #container {
-  cursor: not-allowed;
-
-  /** Color of the label when switch is disabled */
-  color: var(--pf-v5-c-switch__input--disabled__label--Color,
-    var(--pf-global--disabled-color--100, #6a6e73));
-  /** Background color when switch is disabled */
-  background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor,
-    var(--pf-global--disabled-color--200, #d2d2d2));
-}
-
-:host(:disabled) #container::before {
-  /** Background color of the toggle knob when disabled */
-  background-color: var(--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor,
-    var(--pf-global--palette--black-150, #f5f5f5));
-}
-
-:host([checked]:disabled) #container::before {
-  translate: var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX,
-    calc(100% + var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem)));
-}
-
-:host(:disabled:focus-within) #container {
-  outline: none;
-}
-
-#container {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  /** Width of the toggle */
-  width: var(--pf-v5-c-switch__toggle--Width,
-    calc(var(--pf-v5-c-switch__toggle--Height,
-      calc(var(--pf-v5-c-switch--FontSize,
-        var(--pf-global--FontSize--md, 1rem)) * var(--pf-v5-c-switch--LineHeight,
-          var(--pf-global--LineHeight--md, 1.5)))) + var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem) + var(--pf-v5-c-switch__toggle--before--Width,
-            calc(var(--pf-v5-c-switch--FontSize,
-              var(--pf-global--FontSize--md, 1rem)) - var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem)))));
-  height: var(--pf-v5-c-switch__toggle--Height,
-    calc(var(--pf-v5-c-switch--FontSize,
-      var(--pf-global--FontSize--md, 1rem)) * var(--pf-v5-c-switch--LineHeight,
-        var(--pf-global--LineHeight--md, 1.5))));
-  /** Background color of the toggle */
-  background-color: var(--pf-v5-c-switch__toggle--BackgroundColor,
-    var(--pf-global--palette--black-500, #8a8d90));
-  /** Border radius of the toggle */
-  border-radius: var(--pf-v5-c-switch__toggle--BorderRadius,
-    var(--pf-v5-c-switch__toggle--Height, calc(var(--pf-v5-c-switch--FontSize,
-      var(--pf-global--FontSize--md, 1rem)) * var(--pf-v5-c-switch--LineHeight,
-        var(--pf-global--LineHeight--md, 1.5)))));
-}
-
-#container::before {
-  position: absolute;
-  display: block;
-  content: "";
-  /** Top position of the toggle knob */
-  top: var(--pf-v5-c-switch__toggle--before--Top,
-    calc((var(--pf-v5-c-switch__toggle--Height,
-      calc(var(--pf-v5-c-switch--FontSize,
-        var(--pf-global--FontSize--md, 1rem)) * var(--pf-v5-c-switch--LineHeight,
-          var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-v5-c-switch__toggle--before--Height,
-            var(--pf-v5-c-switch__toggle--before--Width,
-              calc(var(--pf-v5-c-switch--FontSize,
-                var(--pf-global--FontSize--md, 1rem)) - var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem))))) / 2));
-  /** Left position of the toggle knob */
-  left: var(--pf-v5-c-switch__toggle--before--Left,
-    var(--pf-v5-c-switch__toggle--before--Top,
-      calc((var(--pf-v5-c-switch__toggle--Height,
-        calc(var(--pf-v5-c-switch--FontSize,
-          var(--pf-global--FontSize--md, 1rem)) * var(--pf-v5-c-switch--LineHeight,
-            var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-v5-c-switch__toggle--before--Height,
-              var(--pf-v5-c-switch__toggle--before--Width,
-                calc(var(--pf-v5-c-switch--FontSize,
-                  var(--pf-global--FontSize--md, 1rem)) - var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem))))) / 2)));
-  /** Width of the toggle knob */
-  width: var(--pf-v5-c-switch__toggle--before--Width,
-    calc(var(--pf-v5-c-switch--FontSize,
-      var(--pf-global--FontSize--md, 1rem)) - var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem)));
-  /** Height of the toggle knob */
-  height: var(--pf-v5-c-switch__toggle--before--Height,
-    var(--pf-v5-c-switch__toggle--before--Width,
-      calc(var(--pf-v5-c-switch--FontSize,
-        var(--pf-global--FontSize--md, 1rem)) - var(--pf-v5-c-switch__toggle-icon--Offset, 0.125rem))));
-  /** Background color of the toggle knob */
-  background-color: var(--pf-v5-c-switch__toggle--before--backgroundcolor,
-    var(--pf-global--backgroundcolor--100, #fff));
-  /** Border radius of the toggle knob */
-  border-radius: var(--pf-v5-c-switch__toggle--before--BorderRadius,
-    var(--pf-global--BorderRadius--lg, 30em));
-  /** Box shadow of the toggle knob */
-  box-shadow: var(--pf-v5-c-switch__toggle--before--BoxShadow,
-    var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));
-  /** Transition of the toggle knob */
-  transition: var(--pf-v5-c-switch__toggle--before--Transition,
-    var(--pf-v5-c-switch__toggle--before--Transition, translate .25s ease 0s));
-}
-
-svg {
-  /** Horizontal margin of the toggle icon */
-  margin-inline: var(--pf-v5-c-switch__toggle-icon--Left,
-    calc(var(--pf-v5-c-switch--FontSize,
-      var(--pf-global--FontSize--md, 1rem)) * .4));
-  /** Font size of the toggle icon */
-  font-size: var(--pf-v5-c-switch__toggle-icon--FontSize,
-    calc(var(--pf-v5-c-switch--FontSize,
-      var(--pf-global--FontSize--md, 1rem)) * .625));
-  /** Color of the toggle icon */
-  color: var(--pf-v5-c-switch__toggle-icon--Color,
-    var(--pf-global--Color--light-100, #fff));
-}
diff --git a/elements/pf-v5-switch/pf-v5-switch.ts b/elements/pf-v5-switch/pf-v5-switch.ts
deleted file mode 100644
index c440dc5cf4..0000000000
--- a/elements/pf-v5-switch/pf-v5-switch.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
-import { property } from 'lit/decorators/property.js';
-
-import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
-
-import styles from './pf-v5-switch.css';
-
-/**
- * A **switch** toggles the state of a setting (between on and off). Switches and
- * checkboxes can often be used interchangeably, but the switch provides a more
- * explicit, visible representation on a setting.
- * @alias Switch
- * @fires {Event} change - Fires when the switch selection changes.
- */
-
-@customElement('pf-v5-switch')
-export class PfV5Switch extends LitElement {
-  static readonly styles: CSSStyleSheet[] = [styles];
-
-  static readonly formAssociated = true;
-
-  declare shadowRoot: ShadowRoot;
-
-  #internals = InternalsController.of(this, { role: 'switch' });
-
-  /** @deprecated use `accessible-label` instead */
-  @property({ reflect: true }) label?: string;
-
-  /**
-   * Accessible label for the switch when there is no associated `<label>` element.
-   * Update this value based on the checked state to communicate the meaning of
-   * each state to assistive technology users, e.g. "Wi-Fi on" / "Wi-Fi off".
-   */
-  @property({ reflect: true, attribute: 'accessible-label' }) accessibleLabel?: string;
-
-  /** Flag to show if the switch has a check icon. */
-  @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;
-
-  /** Flag to show if the switch is checked. */
-  @property({ reflect: true, type: Boolean }) checked = false;
-
-  /** Flag to show if the switch is disabled. */
-  @property({ reflect: true, type: Boolean }) disabled = false;
-
-  get labels(): NodeListOf<HTMLLabelElement> {
-    return this.#internals.labels as NodeListOf<HTMLLabelElement>;
-  }
-
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.tabIndex = 0;
-    this.addEventListener('click', this.#onClick);
-    this.addEventListener('keyup', this.#onKeyup);
-    this.addEventListener('keydown', this.#onKeydown);
-    this.#updateLabels();
-  }
-
-  formDisabledCallback(disabled: boolean): void {
-    this.disabled = disabled;
-    this.requestUpdate();
-  }
-
-  override willUpdate(): void {
-    this.#internals.ariaChecked = String(!!this.checked);
-    this.#internals.ariaDisabled = String(!!this.disabled);
-    this.#internals.ariaLabel = this.accessibleLabel || this.label || null;
-  }
-
-  override render(): TemplateResult<1> {
-    return html`
-      <div id="container">
-        <svg id="toggle"
-             role="presentation"
-             fill="currentColor"
-             height="1em"
-             width="1em"
-             viewBox="0 0 512 512"
-             ?hidden=${!this.showCheckIcon}>
-          <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" />
-        </svg>
-      </div>
-    `;
-  }
-
-  #onClick(event: Event) {
-    // @ts-expect-error: firefox workarounds for double-firing in the case of switch nested in label
-    const { originalTarget, explicitOriginalTarget } = event;
-    if (explicitOriginalTarget) {
-      let labels: HTMLLabelElement[];
-      if (originalTarget === event.target
-          && !(labels = Array.from(this.labels)).includes(explicitOriginalTarget)
-          && labels.includes(this.closest('label') as HTMLLabelElement)) {
-        return;
-      }
-    }
-    this.#toggle();
-  }
-
-  #onKeyup(event: KeyboardEvent) {
-    switch (event.key) {
-      case ' ':
-      case 'Enter':
-        event.preventDefault();
-        this.#toggle();
-    }
-  }
-
-  #onKeydown(event: KeyboardEvent) {
-    if (event.key === ' ') {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  }
-
-  #toggle() {
-    if (!this.disabled) {
-      this.checked = !this.checked;
-      this.#updateLabels();
-      this.dispatchEvent(new Event('change', { bubbles: true }));
-    }
-  }
-
-  #updateLabels() {
-    const labelState = this.checked ? 'on' : 'off';
-    this.labels.forEach(label => {
-      const states = label.querySelectorAll<HTMLElement>('[data-state]');
-      states.forEach(state => {
-        if (state) {
-          state.hidden = state.dataset.state !== labelState;
-        }
-      });
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'pf-v5-switch': PfV5Switch;
-  }
-}
diff --git a/elements/pf-v5-switch/test/pf-switch.spec.ts b/elements/pf-v5-switch/test/pf-switch.spec.ts
deleted file mode 100644
index 176a733b38..0000000000
--- a/elements/pf-v5-switch/test/pf-switch.spec.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-import type { A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
-import { expect, html, nextFrame } from '@open-wc/testing';
-import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
-
-import { PfV5Switch } from '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
-
-describe('<pf-v5-switch>', function() {
-  it('imperatively instantiates', function() {
-    expect(document.createElement('pf-v5-switch')).to.be.an.instanceof(PfV5Switch);
-  });
-
-  describe('simply instantiating', function() {
-    let element: PfV5Switch;
-    let snapshot: A11yTreeSnapshot;
-    beforeEach(async function() {
-      const container = await createFixture<PfV5Switch>(html`
-        <div>
-          <pf-v5-switch></pf-v5-switch>
-        </div>
-      `);
-      element = container.querySelector('pf-v5-switch')!;
-      snapshot = await a11ySnapshot({ selector: 'pf-v5-switch' });
-    });
-    it('should upgrade', async function() {
-      const klass = customElements.get('pf-v5-switch');
-      expect(element)
-          .to.be.an.instanceOf(klass)
-          .and
-          .to.be.an.instanceOf(PfV5Switch);
-    });
-    it('has accessible role', function() {
-      expect(snapshot.role).to.equal('switch');
-    });
-    it('has accessible checked field', function() {
-      expect(snapshot.role).to.equal('switch');
-    });
-    it('requires accessible name', function() {
-      // Double negative - this would fail an accessibility audit,
-      // but that failure would be correct, because the template instantiated
-      // in this test's beforeeach hook does not have an accessible name
-      expect(snapshot.name).to.not.be.ok;
-    });
-  });
-
-  describe('with accessible-label attribute', function() {
-    let element: PfV5Switch;
-    let snapshot: A11yTreeSnapshot;
-    beforeEach(async function() {
-      element = await createFixture<PfV5Switch>(html`
-        <pf-v5-switch accessible-label="Dark Mode"></pf-v5-switch>
-      `);
-      snapshot = await a11ySnapshot({ selector: 'pf-v5-switch' });
-    });
-    it('has an accessible name from accessible-label', function() {
-      expect(snapshot.name).to.equal('Dark Mode');
-    });
-    it('keeps the same accessible name regardless of checked state', async function() {
-      element.click();
-      await element.updateComplete;
-      await nextFrame();
-      snapshot = await a11ySnapshot({ selector: 'pf-v5-switch' });
-      expect(snapshot.name).to.equal('Dark Mode');
-    });
-  });
-
-  describe('with labels for on and off state', function() {
-    let element: PfV5Switch;
-    let snapshot: A11yTreeSnapshot;
-    beforeEach(async function() {
-      const container = await createFixture<PfV5Switch>(html`
-        <div>
-          <pf-v5-switch id="switch"></pf-v5-switch>
-          <label for="switch">
-            <span data-state="on">Message when on</span>
-            <span data-state="off" hidden>Message when off</span>
-          </label>
-        </div>
-        `);
-      element = container.querySelector('pf-v5-switch')!;
-      snapshot = await a11ySnapshot({ selector: '#switch' });
-    });
-
-    it('is accessible', function() {
-      expect(snapshot.role).to.equal('switch');
-      expect(snapshot.name).to.be.ok;
-      expect(snapshot.checked).to.be.false;
-    });
-
-    it('should show the label for the unchecked state', function() {
-      expect(snapshot.name).to.equal('Message when off');
-    });
-
-    describe('clicking the switch', function() {
-      beforeEach(async function() {
-        element.click();
-        await element.updateComplete;
-        await nextFrame();
-        snapshot = await a11ySnapshot({ selector: '#switch' });
-      });
-      it('should be checked', function() {
-        expect(element.checked).to.be.true;
-        expect(snapshot.checked).to.be.true;
-      });
-      it('should show the label for the checked state', function() {
-        expect(snapshot.name).to.equal('Message when on');
-      });
-    });
-  });
-
-  describe('when checked attr is present', function() {
-    let element: PfV5Switch;
-    let snapshot: A11yTreeSnapshot;
-    beforeEach(async function() {
-      element = await createFixture<PfV5Switch>(html`
-        <pf-v5-switch id="switch" checked></pf-v5-switch>
-      `);
-
-      await element.updateComplete;
-      await nextFrame();
-      snapshot = await a11ySnapshot({ selector: '#switch' });
-    });
-
-    it('should be checked', function() {
-      expect(element.checked).to.be.true;
-      expect(snapshot.checked).to.be.true;
-    });
-  });
-
-  describe('when checked attr is not present', function() {
-    let element: PfV5Switch;
-    let snapshot: A11yTreeSnapshot;
-    beforeEach(async function() {
-      element = await createFixture<PfV5Switch>(html`
-        <pf-v5-switch id="switch"></pf-v5-switch>
-      `);
-
-      await element.updateComplete;
-      await nextFrame();
-      snapshot = await a11ySnapshot({ selector: '#switch' });
-    });
-
-    it('should be checked', function() {
-      expect(element.checked).to.be.false;
-      expect(snapshot.checked).to.be.false;
-    });
-  });
-
-
-  describe('when checked and show-check-icon attrs are present', function() {
-    let element: PfV5Switch;
-    beforeEach(async function() {
-      const container = await createFixture<PfV5Switch>(html`
-        <div>
-          <pf-v5-switch id="switch" show-check-icon checked></pf-v5-switch>
-          <label for="switch">
-            <span data-state="on">Message when on</span>
-            <span data-state="off" hidden>Message when off</span>
-          </label>
-        </div>
-      `);
-      element = container.querySelector('pf-v5-switch')!;
-    });
-    it('should display a check icon', async function() {
-      // TODO: can we test this without inspecting the private shadowRoot?
-      const svg = element.shadowRoot.querySelector('svg');
-      expect(svg).to.be.ok;
-      expect(svg?.hasAttribute('hidden')).to.be.false;
-    });
-  });
-
-  describe('when checked and show-check-icon attrs are present', function() {
-    let element: PfV5Switch;
-    beforeEach(async function() {
-      element = await createFixture<PfV5Switch>(html`
-        <pf-v5-switch id="switch" show-check-icon checked></pf-v5-switch>
-        <label for="switch">
-          <span data-state="on">Message when on</span>
-          <span data-state="off" hidden>Message when off</span>
-        </label>
-      `);
-    });
-    it('should display a check icon', async function() {
-      // TODO: can we test this without inspecting the private shadowRoot?
-      const svg = element.shadowRoot.querySelector('svg');
-      expect(svg).to.be.ok;
-      expect(svg?.hasAttribute('hidden')).to.be.false;
-    });
-  });
-
-  describe('when nested inside a label element', function() {
-    let label: HTMLLabelElement;
-    let element: PfV5Switch;
-    let snapshot: A11yTreeSnapshot;
-    beforeEach(async function() {
-      label = await createFixture<HTMLLabelElement>(html`
-        <label>
-          <span>Dark Mode</span>
-          <pf-v5-switch id="switch"></pf-v5-switch>
-        </label>
-      `);
-      element = label.querySelector('pf-v5-switch')!;
-      snapshot = await a11ySnapshot({ selector: 'pf-v5-switch' });
-    });
-    it('does not hide label', function() {
-      expect(label.hidden).to.be.false;
-    });
-    it('has an accessible name', function() {
-      expect(snapshot.name).to.equal('Dark Mode');
-    });
-    describe('clicking the label', function() {
-      beforeEach(function() {
-        label.click();
-      });
-      it('toggles the state', function() {
-        expect(element.checked).to.be.true;
-      });
-    });
-    describe('clicking the switch', function() {
-      beforeEach(function() {
-        element.click();
-      });
-      it('toggles the state', function() {
-        expect(element.checked).to.be.true;
-      });
-    });
-  });
-
-  // TODO: test keyboard a11y with wtr sendKeys
-});
diff --git a/elements/pf-v5-tabs/demo/box.html b/elements/pf-v5-tabs/demo/box.html
index 7ab75da55d..3882b770cc 100644
--- a/elements/pf-v5-tabs/demo/box.html
+++ b/elements/pf-v5-tabs/demo/box.html
@@ -14,13 +14,13 @@
     Box Type:
     <label for="toggle-variant" data-state="on">Dark</label>
     <label for="toggle-variant" data-state="off">Light</label>
-    <pf-v5-switch id="toggle-variant"></pf-v5-switch>
+    <pf-v6-switch id="toggle-variant"></pf-v6-switch>
   </form>
 </section>
 
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tabs/pf-v5-tabs.js';
 
   document.getElementById('toggle-variant').addEventListener('change', function(event) {
diff --git a/elements/pf-v5-tabs/demo/inset.html b/elements/pf-v5-tabs/demo/inset.html
index 2f38a3a481..8a84e0c94e 100644
--- a/elements/pf-v5-tabs/demo/inset.html
+++ b/elements/pf-v5-tabs/demo/inset.html
@@ -23,7 +23,7 @@
 
 <script type="module">
   import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tabs/pf-v5-tabs.js';
 
   const inset = document.querySelector('#inset');
diff --git a/elements/pf-v5-tabs/demo/overflow.html b/elements/pf-v5-tabs/demo/overflow.html
index 2a80262c86..599608b07b 100644
--- a/elements/pf-v5-tabs/demo/overflow.html
+++ b/elements/pf-v5-tabs/demo/overflow.html
@@ -18,13 +18,13 @@
     Box variant:
     <label for="toggle-resize" data-state="on">Dark</label>
     <label for="toggle-resize" data-state="off">None</label>
-    <pf-v5-switch id="toggle-resize"></pf-v5-switch>
+    <pf-v6-switch id="toggle-resize"></pf-v6-switch>
   </form>
 </section>
 
 <script type="module">
   import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tabs/pf-v5-tabs.js';
   const tabs = document.getElementById('overflow');
   const toggle = document.getElementById('toggle-resize');
diff --git a/elements/pf-v5-tabs/demo/vertical.html b/elements/pf-v5-tabs/demo/vertical.html
index 673b1a6bcf..75ab4ee600 100644
--- a/elements/pf-v5-tabs/demo/vertical.html
+++ b/elements/pf-v5-tabs/demo/vertical.html
@@ -14,12 +14,12 @@
     Box variant:
     <label for="toggle-vertical" data-state="on">Dark</label>
     <label for="toggle-vertical" data-state="off">None</label>
-    <pf-v5-switch id="toggle-vertical"></pf-v5-switch>
+    <pf-v6-switch id="toggle-vertical"></pf-v6-switch>
   </form>
 </div>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tabs/pf-v5-tabs.js';
 
   const toggle = document.getElementById('toggle-vertical');
diff --git a/elements/pf-v5-text-input/demo/disabled.html b/elements/pf-v5-text-input/demo/disabled.html
index baa3c06125..5b9064e573 100644
--- a/elements/pf-v5-text-input/demo/disabled.html
+++ b/elements/pf-v5-text-input/demo/disabled.html
@@ -9,12 +9,12 @@
 </fieldset>
 
 <label>Disable the fieldset
-  <pf-v5-switch id="disabled-fieldset-switch" checked></pf-v5-switch>
+  <pf-v6-switch id="disabled-fieldset-switch" checked></pf-v6-switch>
 </label>
 
 <script type="module">
   import '@patternfly/elements/pf-v5-text-input/pf-v5-text-input.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   document.getElementById('disabled-fieldset-switch')
     .addEventListener('change', function() {
       document.getElementById('disablable-fieldset').disabled = this.checked;
diff --git a/elements/pf-v5-text-input/demo/kitchen-sink.html b/elements/pf-v5-text-input/demo/kitchen-sink.html
index bfe72f71dd..8e76175a32 100644
--- a/elements/pf-v5-text-input/demo/kitchen-sink.html
+++ b/elements/pf-v5-text-input/demo/kitchen-sink.html
@@ -26,7 +26,7 @@
                  readonly
                  value="read only text input example"></pf-v5-text-input>
   <label>
-    <pf-v5-switch onchange="this.closest('fieldset').querySelector('pf-v5-text-input').plain=this.checked;"></pf-v5-switch>
+    <pf-v6-switch onchange="this.closest('fieldset').querySelector('pf-v5-text-input').plain=this.checked;"></pf-v6-switch>
     Plain read only variant
   </label>
 </fieldset>
@@ -70,7 +70,7 @@
 
 <script type="module">
   import '@patternfly/elements/pf-v5-text-input/pf-v5-text-input.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   await customElements.whenDefined('pf-v5-text-input');
   for (const input of document.querySelectorAll('pf-v5-text-input[required]')) {
     await input.updateComplete;
diff --git a/elements/pf-v5-text-input/demo/read-only.html b/elements/pf-v5-text-input/demo/read-only.html
index fcee62c732..fdb42ce256 100644
--- a/elements/pf-v5-text-input/demo/read-only.html
+++ b/elements/pf-v5-text-input/demo/read-only.html
@@ -5,14 +5,14 @@
                  readonly
                  value="read only text input example"></pf-v5-text-input>
   <label>
-    <pf-v5-switch onchange="this.closest('fieldset').querySelector('pf-v5-text-input').plain=this.checked;"></pf-v5-switch>
+    <pf-v6-switch onchange="this.closest('fieldset').querySelector('pf-v5-text-input').plain=this.checked;"></pf-v6-switch>
     Plain read only variant
   </label>
 </fieldset>
 
 <script type="module">
   import '@patternfly/elements/pf-v5-text-input/pf-v5-text-input.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
 </script>
 
 <link rel="stylesheet" href="demo.css">
diff --git a/elements/pf-v5-text-input/demo/validation.html b/elements/pf-v5-text-input/demo/validation.html
index a33abdab7c..a710e8ea87 100644
--- a/elements/pf-v5-text-input/demo/validation.html
+++ b/elements/pf-v5-text-input/demo/validation.html
@@ -1,6 +1,6 @@
 <fieldset>
   <legend>Invalid</legend>
-  <label>Validate on Blur? <pf-v5-switch id="onblur"></pf-v5-switch></label>
+  <label>Validate on Blur? <pf-v6-switch id="onblur"></pf-v6-switch></label>
   <pf-v5-text-input id="validated"
                  error-text="Enter a three digit integer"
                  pattern="\d{3}"
@@ -10,7 +10,7 @@
 
 <script type="module">
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-text-input/pf-v5-text-input.js';
   const onblur = document.getElementById('onblur');
   const validated = document.getElementById('validated');
diff --git a/elements/pf-v5-tooltip/demo/block-triggers.html b/elements/pf-v5-tooltip/demo/block-triggers.html
index 1a728b26b2..763d62f45b 100644
--- a/elements/pf-v5-tooltip/demo/block-triggers.html
+++ b/elements/pf-v5-tooltip/demo/block-triggers.html
@@ -1,6 +1,6 @@
 <header>
   <h2>Toggle Container Width</h2>
-  <pf-v5-switch id="width-toggle"></pf-v5-switch>
+  <pf-v6-switch id="width-toggle"></pf-v6-switch>
   <label for="width-toggle" data-state="off">Full width</label>
   <label for="width-toggle" data-state="on">Narrow</label>
 </header>
@@ -27,7 +27,7 @@ <h2>Block Triggers</h2>
 </section>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
   document.getElementById('width-toggle').addEventListener('change', function(event) {
     document.querySelector('[data-demo]').classList.toggle('narrow', event.target.checked);
diff --git a/elements/pf-v5-tooltip/demo/custom-styles.html b/elements/pf-v5-tooltip/demo/custom-styles.html
index 390c36cc39..fb085c2edc 100644
--- a/elements/pf-v5-tooltip/demo/custom-styles.html
+++ b/elements/pf-v5-tooltip/demo/custom-styles.html
@@ -1,6 +1,6 @@
 <header>
   <h2>Toggle Container Width</h2>
-  <pf-v5-switch id="width-toggle"></pf-v5-switch>
+  <pf-v6-switch id="width-toggle"></pf-v6-switch>
   <label for="width-toggle" data-state="off">Full width</label>
   <label for="width-toggle" data-state="on">Narrow</label>
 </header>
@@ -20,7 +20,7 @@ <h2>Toggle Container Width</h2>
 </section>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
   document.getElementById('width-toggle').addEventListener('change', function(event) {
     document.querySelector('[data-demo]').classList.toggle('narrow', event.target.checked);
diff --git a/elements/pf-v5-tooltip/demo/index.html b/elements/pf-v5-tooltip/demo/index.html
index 7b8c713c8b..c1c58858f5 100644
--- a/elements/pf-v5-tooltip/demo/index.html
+++ b/elements/pf-v5-tooltip/demo/index.html
@@ -1,6 +1,6 @@
 <header>
   <h2>Toggle Container Width</h2>
-  <pf-v5-switch id="width-toggle"></pf-v5-switch>
+  <pf-v6-switch id="width-toggle"></pf-v6-switch>
   <label for="width-toggle" data-state="off">Full width</label>
   <label for="width-toggle" data-state="on">Narrow</label>
 </header>
@@ -14,7 +14,7 @@ <h2>Toggle Container Width</h2>
 </section>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
   document.getElementById('width-toggle').addEventListener('change', function(event) {
     document.querySelector('[data-demo]').classList.toggle('narrow', event.target.checked);
diff --git a/elements/pf-v5-tooltip/demo/placement.html b/elements/pf-v5-tooltip/demo/placement.html
index 9b6e6dabaf..ff72f0ad07 100644
--- a/elements/pf-v5-tooltip/demo/placement.html
+++ b/elements/pf-v5-tooltip/demo/placement.html
@@ -1,6 +1,6 @@
 <header>
   <h2>Toggle Container Width</h2>
-  <pf-v5-switch id="width-toggle"></pf-v5-switch>
+  <pf-v6-switch id="width-toggle"></pf-v6-switch>
   <label for="width-toggle" data-state="off">Full width</label>
   <label for="width-toggle" data-state="on">Narrow</label>
 </header>
@@ -47,7 +47,7 @@ <h2>Toggle Container Width</h2>
 </section>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
   document.getElementById('width-toggle').addEventListener('change', function(event) {
     document.querySelector('[data-demo]').classList.toggle('narrow', event.target.checked);
diff --git a/elements/pf-v5-tooltip/demo/slotted-content.html b/elements/pf-v5-tooltip/demo/slotted-content.html
index 220cfce0af..cf93206d22 100644
--- a/elements/pf-v5-tooltip/demo/slotted-content.html
+++ b/elements/pf-v5-tooltip/demo/slotted-content.html
@@ -1,6 +1,6 @@
 <header>
   <h2>Toggle Container Width</h2>
-  <pf-v5-switch id="width-toggle"></pf-v5-switch>
+  <pf-v6-switch id="width-toggle"></pf-v6-switch>
   <label for="width-toggle" data-state="off">Full width</label>
   <label for="width-toggle" data-state="on">Narrow</label>
 </header>
@@ -19,7 +19,7 @@ <h2>Toggle Container Width</h2>
 </section>
 
 <script type="module">
-  import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
   import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
   document.getElementById('width-toggle').addEventListener('change', function(event) {
     document.querySelector('[data-demo]').classList.toggle('narrow', event.target.checked);
diff --git a/elements/pf-v6-switch/README.md b/elements/pf-v6-switch/README.md
new file mode 100644
index 0000000000..94c5dd2dec
--- /dev/null
+++ b/elements/pf-v6-switch/README.md
@@ -0,0 +1,54 @@
+# pf-v6-switch
+
+A **switch** toggles the state of a setting (between on and off). Switches and
+checkboxes can often be used interchangeably, but the switch provides a more
+explicit, visible representation on a setting.
+
+## Usage
+
+```html
+<pf-v6-switch checked>Wi-Fi</pf-v6-switch>
+```
+
+### Without visible label
+
+```html
+<pf-v6-switch accessible-label="Wi-Fi" show-check-icon checked></pf-v6-switch>
+```
+
+### With external label
+
+```html
+<pf-v6-switch id="wifi"></pf-v6-switch>
+<label for="wifi">Wi-Fi</label>
+```
+
+## Divergences from React `Switch`
+
+### Not implemented
+
+| React prop | Notes |
+|---|---|
+| `defaultChecked` | React-only uncontrolled pattern; web components use the `checked` attribute directly |
+
+### Changed API
+
+| React prop | Web component | Difference |
+|---|---|---|
+| `label` | Default slot | Visible label text is slotted, not a prop. Also supports external `<label for="id">` |
+| `isDisabled` | `disabled` | Dropped `is-` prefix per web component convention |
+| `isReversed` | `reversed` | Dropped `is-` prefix per web component convention |
+| `isChecked` | `checked` | Dropped `is-` prefix per web component convention |
+| `hasCheckIcon` | `show-check-icon` | Attribute name carried over from v5 for clarity |
+| `aria-label` | `accessible-label` | Abstracted behind custom attribute per PFE convention |
+| `aria-labelledby` | External `<label for="id">` | Use native label association instead |
+| `onChange` | `change` event | Standard DOM event; cancelable via `preventDefault()` to reject state change |
+
+### Added
+
+| Web component API | Notes |
+|---|---|
+| External `<label>` support | FACE element works with native `<label for="id">` or nesting in `<label>` |
+| Form association | Submits `"on"` when checked, omitted when unchecked (matches native checkbox) |
+| Form reset | Reverts to initial `checked` value on form reset |
+| Cancelable `change` event | Call `preventDefault()` to reject the toggle and revert state |
diff --git a/elements/pf-v6-switch/demo/cancelable-change.html b/elements/pf-v6-switch/demo/cancelable-change.html
new file mode 100644
index 0000000000..b889da15de
--- /dev/null
+++ b/elements/pf-v6-switch/demo/cancelable-change.html
@@ -0,0 +1,22 @@
+---
+name: Cancelable change
+description: The change event is cancelable. Calling preventDefault() rejects the toggle and reverts the switch to its previous state.
+---
+<pf-v6-switch id="locked-switch" checked>Locked setting</pf-v6-switch>
+<p id="message">This switch cannot be toggled off.</p>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+
+  const sw = document.getElementById('locked-switch');
+  const message = document.getElementById('message');
+
+  sw.addEventListener('change', function(event) {
+    if (!sw.checked) {
+      event.preventDefault();
+      message.textContent = 'Toggle rejected — this setting is locked on.';
+    } else {
+      message.textContent = 'This switch cannot be toggled off.';
+    }
+  });
+</script>
diff --git a/elements/pf-v6-switch/demo/checked-with-label.html b/elements/pf-v6-switch/demo/checked-with-label.html
new file mode 100644
index 0000000000..f15f5cf572
--- /dev/null
+++ b/elements/pf-v6-switch/demo/checked-with-label.html
@@ -0,0 +1,9 @@
+---
+name: Checked with label
+description: A switch with a check icon provides additional visual feedback for the checked state.
+---
+<pf-v6-switch checked show-check-icon>Togglable option for check icon example</pf-v6-switch>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+</script>
diff --git a/elements/pf-v6-switch/demo/disabled.html b/elements/pf-v6-switch/demo/disabled.html
new file mode 100644
index 0000000000..9a569ac21b
--- /dev/null
+++ b/elements/pf-v6-switch/demo/disabled.html
@@ -0,0 +1,26 @@
+---
+name: Disabled
+description: A disabled switch cannot be toggled.
+---
+<section>
+  <pf-v6-switch disabled checked>Togglable option for disabled checked example</pf-v6-switch>
+</section>
+<section>
+  <pf-v6-switch disabled>Togglable option for disabled unchecked example</pf-v6-switch>
+</section>
+<section>
+  <pf-v6-switch disabled checked accessible-label="Togglable option for checked with no visible label example" show-check-icon></pf-v6-switch>
+</section>
+<section>
+  <pf-v6-switch disabled accessible-label="Togglable option for unchecked with no visible label example" show-check-icon></pf-v6-switch>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+</script>
+
+<style>
+  section {
+    margin-block-end: 1rem;
+  }
+</style>
diff --git a/elements/pf-v6-switch/demo/form-association.html b/elements/pf-v6-switch/demo/form-association.html
new file mode 100644
index 0000000000..b10eb93196
--- /dev/null
+++ b/elements/pf-v6-switch/demo/form-association.html
@@ -0,0 +1,27 @@
+---
+name: Form association
+description: A switch can participate in forms. It submits "on" when checked and is omitted when unchecked. Use the reset button to restore the initial state.
+---
+<form id="settings-form">
+  <pf-v6-switch name="notifications" checked value="im-on">Notifications</pf-v6-switch>
+  <br><br>
+  <button type="submit">Submit</button>
+  <button type="reset">Reset</button>
+  <pre id="output"></pre>
+</form>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+
+  const form = document.getElementById('settings-form');
+  const output = document.getElementById('output');
+
+  form.addEventListener('submit', function(event) {
+    event.preventDefault();
+    const data = new FormData(form);
+    const entries = [...data.entries()];
+    output.textContent = entries.length
+        ? entries.map(([k, v]) => `${k}=${v}`).join('\n')
+        : '(no values submitted)';
+  });
+</script>
diff --git a/elements/pf-v6-switch/demo/index.html b/elements/pf-v6-switch/demo/index.html
new file mode 100644
index 0000000000..b3cca80ca2
--- /dev/null
+++ b/elements/pf-v6-switch/demo/index.html
@@ -0,0 +1,9 @@
+---
+name: Basic
+description: A basic switch toggles the state of a setting.
+---
+<pf-v6-switch checked>Togglable option for basic example</pf-v6-switch>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+</script>
diff --git a/elements/pf-v6-switch/demo/nested-in-label.html b/elements/pf-v6-switch/demo/nested-in-label.html
new file mode 100644
index 0000000000..0422cdfdc0
--- /dev/null
+++ b/elements/pf-v6-switch/demo/nested-in-label.html
@@ -0,0 +1,41 @@
+---
+name: Nested in label
+description: A switch can be nested inside a label element for form association.
+---
+<form>
+  <fieldset>
+    <legend>Settings</legend>
+    <label>
+      <span>Dark Mode</span>
+      <pf-v6-switch id="dark-mode" name="darkMode"></pf-v6-switch>
+    </label>
+  </fieldset>
+  <button type="submit">Submit</button>
+  <output></output>
+</form>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+  document.querySelector('form').addEventListener('submit', function(event) {
+    event.preventDefault();
+    const data = new FormData(event.target);
+    document.querySelector('output').textContent =
+      JSON.stringify(Object.fromEntries(data), null, 2);
+  });
+</script>
+
+<style>
+  fieldset {
+    display: grid;
+    gap: 1rem;
+    border: none;
+    padding: 0;
+  }
+
+  label {
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    align-items: center;
+    gap: 0.5rem;
+  }
+</style>
diff --git a/elements/pf-v6-switch/demo/reversed-layout.html b/elements/pf-v6-switch/demo/reversed-layout.html
new file mode 100644
index 0000000000..4aff3ec225
--- /dev/null
+++ b/elements/pf-v6-switch/demo/reversed-layout.html
@@ -0,0 +1,9 @@
+---
+name: Reversed layout
+description: A switch with reversed layout places the label before the toggle.
+---
+<pf-v6-switch reversed checked>Togglable option for reversed example</pf-v6-switch>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+</script>
diff --git a/elements/pf-v6-switch/demo/without-label.html b/elements/pf-v6-switch/demo/without-label.html
new file mode 100644
index 0000000000..b22ec59487
--- /dev/null
+++ b/elements/pf-v6-switch/demo/without-label.html
@@ -0,0 +1,11 @@
+---
+name: Without label
+description: >-
+  A switch without a visible label must have an accessible-label attribute
+  to remain accessible.
+---
+<pf-v6-switch accessible-label="Togglable option for no visible label example" checked show-check-icon></pf-v6-switch>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+</script>
diff --git a/elements/pf-v6-switch/docs/pf-v6-switch.md b/elements/pf-v6-switch/docs/pf-v6-switch.md
new file mode 100644
index 0000000000..04423b0668
--- /dev/null
+++ b/elements/pf-v6-switch/docs/pf-v6-switch.md
@@ -0,0 +1,47 @@
+{% renderOverview %}
+  <pf-v6-switch checked>Togglable option</pf-v6-switch>
+{% endrenderOverview %}
+
+{% band header="Usage" %}
+  {% htmlexample %}
+  <pf-v6-switch checked>Togglable option</pf-v6-switch>
+  {% endhtmlexample %}
+
+
+  ### Reversed layout
+  Use the `reversed` attribute to place the label before the toggle.
+
+  {% htmlexample %}
+  <pf-v6-switch reversed checked>Togglable option</pf-v6-switch>
+  {% endhtmlexample %}
+
+
+  ### Without label
+  A switch without a visible label must have an `accessible-label` attribute
+  to remain accessible.
+
+  {% htmlexample %}
+  <pf-v6-switch accessible-label="Togglable option" show-check-icon checked></pf-v6-switch>
+  {% endhtmlexample %}
+
+
+  ### Disabled
+
+  {% htmlexample %}
+  <pf-v6-switch disabled checked>Togglable option</pf-v6-switch>
+  <pf-v6-switch disabled>Togglable option</pf-v6-switch>
+  {% endhtmlexample %}
+
+{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}
diff --git a/elements/pf-v6-switch/docs/screenshot.png b/elements/pf-v6-switch/docs/screenshot.png
new file mode 100644
index 0000000000..b8a9d955b2
Binary files /dev/null and b/elements/pf-v6-switch/docs/screenshot.png differ
diff --git a/elements/pf-v6-switch/pf-v6-switch.css b/elements/pf-v6-switch/pf-v6-switch.css
new file mode 100644
index 0000000000..22a2ea2708
--- /dev/null
+++ b/elements/pf-v6-switch/pf-v6-switch.css
@@ -0,0 +1,202 @@
+:host {
+  display: inline-grid;
+  grid-template-columns: auto;
+  grid-auto-columns: 1fr;
+  color-scheme: light dark;
+  /** Gap between toggle and label */
+  column-gap: var(--pf-v6-c-switch--ColumnGap, 0.5rem);
+  /** Switch container height */
+  height: var(--pf-v6-c-switch--Height, auto);
+  /** Switch font size */
+  font-size: var(--pf-v6-c-switch--FontSize, 0.875rem);
+  /** Switch line height */
+  line-height: var(--pf-v6-c-switch--LineHeight, 1.5);
+  vertical-align: middle;
+  cursor: pointer;
+  outline: none;
+}
+
+#toggle.reversed,
+#label.reversed {
+  grid-row: 1;
+}
+
+#label.reversed {
+  grid-column: 1;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+}
+
+#toggle {
+  /** Toggle track background color (unchecked). Overrides the `--pf-t--global--background--color--control--default` design token. */
+  --_bg: var(--pf-v6-c-switch__toggle--BackgroundColor,
+    var(--pf-t--global--background--color--control--default, light-dark(#ffffff, #383838)));
+  /** Toggle track border color. Overrides the `--pf-t--global--border--color--control--default` design token. */
+  --_border-color: var(--pf-v6-c-switch__toggle--BorderColor,
+    var(--pf-t--global--border--color--control--default, light-dark(#c7c7c7, #a3a3a3)));
+  /** Toggle track border width. Overrides the `--pf-t--global--border--width--control--default` design token. */
+  --_border-width: var(--pf-v6-c-switch__toggle--BorderWidth,
+    var(--pf-t--global--border--width--control--default, 1px));
+  /** Knob background color (unchecked). Overrides the `--pf-t--global--icon--color--subtle` design token. */
+  --_knob-bg: var(--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor,
+    var(--pf-t--global--icon--color--subtle, light-dark(#707070, #a3a3a3)));
+
+  position: relative;
+  display: inline-block;
+  /** Toggle track width */
+  width: var(--pf-v6-c-switch__toggle--Width,
+    calc(var(--pf-v6-c-switch__toggle--Height,
+      calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * var(--pf-v6-c-switch--LineHeight, 1.5)))
+      + var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem)
+      + var(--pf-v6-c-switch__toggle--before--Width,
+        calc(var(--pf-v6-c-switch--FontSize, 0.875rem) - var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem)))));
+  /** Toggle track height */
+  height: var(--pf-v6-c-switch__toggle--Height,
+    calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * var(--pf-v6-c-switch--LineHeight, 1.5)));
+  background-color: var(--_bg);
+  /** Toggle track border radius. Overrides the `--pf-t--global--border--radius--pill` design token. */
+  border-radius: var(--pf-v6-c-switch__toggle--BorderRadius,
+    var(--pf-t--global--border--radius--pill, 999px));
+
+  &:before {
+    position: absolute;
+    inset-block-start: 50%;
+    /** Knob horizontal offset (unchecked) */
+    inset-inline-start: var(--pf-v6-c-switch__toggle--before--InsetInlineStart,
+      calc((var(--pf-v6-c-switch__toggle--Height,
+        calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * var(--pf-v6-c-switch--LineHeight, 1.5)))
+        - var(--pf-v6-c-switch__toggle--before--Height,
+          var(--pf-v6-c-switch__toggle--before--Width,
+            calc(var(--pf-v6-c-switch--FontSize, 0.875rem) - var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem))))) / 2));
+    display: block;
+    /** Knob width */
+    width: var(--pf-v6-c-switch__toggle--before--Width,
+      calc(var(--pf-v6-c-switch--FontSize, 0.875rem) - var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem)));
+    /** Knob height */
+    height: var(--pf-v6-c-switch__toggle--before--Height,
+      var(--pf-v6-c-switch__toggle--before--Width,
+        calc(var(--pf-v6-c-switch--FontSize, 0.875rem) - var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem))));
+    content: "";
+    background-color: var(--_knob-bg);
+    border: var(--pf-v6-c-switch__toggle--before--BorderWidth,
+      var(--pf-t--global--border--width--high-contrast--regular, 0)) solid transparent;
+    /** Knob border radius. Overrides the `--pf-t--global--border--radius--large` design token. */
+    border-radius: var(--pf-v6-c-switch__toggle--before--BorderRadius,
+      var(--pf-t--global--border--radius--large, 24px));
+    transition: var(--pf-v6-c-switch__toggle--before--Transition,
+      /** Knob transition timing function. Overrides the `--pf-t--global--motion--timing-function--default` design token. */
+      translate var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction,
+        var(--pf-t--global--motion--timing-function--default, cubic-bezier(.4, 0, .2, 1)))
+      /** Knob transition duration. Overrides the `--pf-t--global--motion--duration--md` design token. */
+      var(--pf-v6-c-switch__toggle--before--TransitionDuration,
+        var(--pf-t--global--motion--duration--md, 200ms)),
+      background-color var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction,
+        var(--pf-t--global--motion--timing-function--default, cubic-bezier(.4, 0, .2, 1)))
+      var(--pf-v6-c-switch__toggle--before--TransitionDuration,
+        var(--pf-t--global--motion--duration--md, 200ms)));
+    translate: 0 -50%;
+  }
+
+  &:after {
+    position: absolute;
+    inset: 0;
+    content: "";
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--pf-v6-c-switch__toggle--BorderRadius,
+      var(--pf-t--global--border--radius--pill, 999px));
+  }
+
+  &.checked {
+    /** Toggle track background color (checked). Overrides the `--pf-t--global--color--brand--default` design token. */
+    --_bg: var(--pf-v6-c-switch__input--checked__toggle--BackgroundColor,
+      var(--pf-t--global--color--brand--default, light-dark(#0066cc, #92c5f9)));
+    /** Toggle track border width (checked) */
+    --_border-width: var(--pf-v6-c-switch__input--checked__toggle--BorderWidth,
+      var(--pf-t--global--border--width--high-contrast--regular, 0));
+    /** Toggle track border color (checked) */
+    --_border-color: var(--pf-v6-c-switch__input--checked__toggle--BorderColor, transparent);
+    /** Knob background color (checked). Overrides the `--pf-t--global--icon--color--inverse` design token. */
+    --_knob-bg: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor,
+      var(--pf-t--global--icon--color--inverse, light-dark(#ffffff, #1f1f1f)));
+
+    &::before {
+      /** Knob translate distance (checked). Base offset for knob positioning. */
+      translate: var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX,
+        calc(100% + var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem))) -50%;
+    }
+  }
+
+  &.disabled {
+    /** Toggle track background color (disabled). Overrides the `--pf-t--global--background--color--disabled--default` design token. */
+    --_bg: var(--pf-v6-c-switch__input--disabled__toggle--BackgroundColor,
+      var(--pf-t--global--background--color--disabled--default, light-dark(#c7c7c7, #a3a3a3)));
+    /** Toggle track border color (disabled). Overrides the `--pf-t--global--border--color--high-contrast` design token. */
+    --_border-color: var(--pf-v6-c-switch__input--disabled__toggle--BorderColor,
+      var(--pf-t--global--border--color--high-contrast, transparent));
+    /** Knob background color (disabled). Overrides the `--pf-t--global--icon--color--on-disabled` design token. */
+    --_knob-bg: var(--pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor,
+      var(--pf-t--global--icon--color--on-disabled, light-dark(#4d4d4d, #383838)));
+
+    #check-icon {
+      /** Check icon color (disabled). Overrides the `--pf-t--global--icon--color--disabled` design token. */
+      color: var(--pf-v6-c-switch__input--disabled__toggle-icon--Color,
+        var(--pf-t--global--icon--color--disabled, light-dark(#a3a3a3, #707070)));
+    }
+  }
+}
+
+#check-icon {
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  /** Check icon horizontal offset */
+  inset-inline-start: var(--pf-v6-c-switch__toggle-icon--InsetInlineStart,
+    calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * .4));
+  display: flex;
+  align-items: center;
+  /** Check icon font size */
+  font-size: var(--pf-v6-c-switch__toggle-icon--FontSize,
+    calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * .625));
+  /** Check icon color. Overrides the `--pf-t--global--icon--color--on-brand--default` design token. */
+  color: var(--pf-v6-c-switch__toggle-icon--Color,
+    var(--pf-t--global--icon--color--on-brand--default, light-dark(#ffffff, #1f1f1f)));
+
+  &[hidden] {
+    display: none;
+  }
+
+}
+
+#label {
+  display: inline-block;
+  grid-column: 2;
+  vertical-align: top;
+  /** Label text color (unchecked). Overrides the `--pf-t--global--text--color--subtle` design token. */
+  color: var(--pf-v6-c-switch__input--not-checked__label--Color,
+    var(--pf-t--global--text--color--subtle, light-dark(#4d4d4d, #c7c7c7)));
+
+  &.checked {
+    /** Label text color (checked). Overrides the `--pf-t--global--text--color--regular` design token. */
+    color: var(--pf-v6-c-switch__input--checked__label--Color,
+      var(--pf-t--global--text--color--regular, light-dark(#151515, #ffffff)));
+  }
+
+  &.disabled {
+    /** Label text color (disabled). Overrides the `--pf-t--global--text--color--disabled` design token. */
+    color: var(--pf-v6-c-switch__input--disabled__label--Color,
+      var(--pf-t--global--text--color--disabled, light-dark(#a3a3a3, #707070)));
+  }
+}
+
+:host(:is(:focus, :focus-within)) #toggle:not(.disabled) {
+  /** Focus outline width. Overrides the `--pf-t--global--border--width--strong` design token. */
+  /** Focus outline color. Overrides the `--pf-t--global--color--brand--default` design token. */
+  outline: var(--pf-v6-c-switch__input--focus__toggle--OutlineWidth,
+    var(--pf-t--global--border--width--strong, 2px)) solid var(--pf-v6-c-switch__input--focus__toggle--OutlineColor,
+      var(--pf-t--global--color--brand--default, light-dark(#0066cc, #92c5f9)));
+  /** Focus outline offset. Overrides the `--pf-t--global--spacer--xs` design token. */
+  outline-offset: var(--pf-v6-c-switch__input--focus__toggle--OutlineOffset,
+    var(--pf-t--global--spacer--xs, 0.25rem));
+}
diff --git a/elements/pf-v6-switch/pf-v6-switch.ts b/elements/pf-v6-switch/pf-v6-switch.ts
new file mode 100644
index 0000000000..1837c1fbab
--- /dev/null
+++ b/elements/pf-v6-switch/pf-v6-switch.ts
@@ -0,0 +1,168 @@
+import { LitElement, html, isServer, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
+
+import styles from './pf-v6-switch.css';
+
+/**
+ * A **switch** provides a toggle control for turning a setting on or off.
+ * Each switch MUST have a visible label or an `accessible-label` attribute.
+ * Switches without visible labels SHOULD set `show-check-icon`.
+ * Keyboard: `Space` or `Enter` toggles the switch.
+ * Uses ARIA `switch` role via ElementInternals (WCAG 1.3.1, 4.1.2, 2.1.1).
+ *
+ * @summary Toggle control for on/off settings
+ *
+ * @fires {Event} change - Fires when the switch is toggled. Uses the native
+ *        `Event` interface with no custom detail payload.
+ *        Cancelable: call `preventDefault()` to reject the state change.
+ */
+@customElement('pf-v6-switch')
+export class PfV6Switch extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+  static readonly formAssociated = true;
+
+  #internals = InternalsController.of(this, { role: 'switch' });
+
+  #slots = new SlotController(this, null);
+
+  /**
+   * Accessible label for the switch when there is no visible label text.
+   * Should describe the checked state, e.g. "Wi-Fi" (not "Wi-Fi on/off").
+   */
+  @property({ reflect: true, attribute: 'accessible-label' }) accessibleLabel?: string;
+
+  /** Flag to show a check icon on the toggle when checked. */
+  @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;
+
+  /** Whether the switch is checked. */
+  @property({ reflect: true, type: Boolean }) checked = false;
+
+  /** Whether the switch is disabled. */
+  @property({ reflect: true, type: Boolean }) disabled = false;
+
+  /** Reverses the layout so the label appears before the toggle. */
+  @property({ reflect: true, type: Boolean }) reversed = false;
+
+  /** Form value defaults to undefined */
+  @property() value?: string;
+
+  #initialChecked = false;
+
+  get #classes() {
+    return [
+      this.checked && 'checked',
+      this.disabled && 'disabled',
+      this.reversed && 'reversed',
+    ].filter(Boolean).join(' ');
+  }
+
+  get labels(): NodeListOf<HTMLLabelElement> {
+    return this.#internals.labels as NodeListOf<HTMLLabelElement>;
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    if (!isServer) {
+      this.#initialChecked = this.checked;
+      this.addEventListener('click', this.#onClick);
+      this.addEventListener('keyup', this.#onKeyup);
+      this.addEventListener('keydown', this.#onKeydown);
+    }
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keyup', this.#onKeyup);
+    this.removeEventListener('keydown', this.#onKeydown);
+  }
+
+  formDisabledCallback(disabled: boolean): void {
+    this.disabled = disabled;
+    this.requestUpdate();
+  }
+
+  formResetCallback(): void {
+    this.checked = this.#initialChecked;
+  }
+
+  override willUpdate(): void {
+    this.tabIndex = this.disabled ? -1 : 0;
+    this.#internals.ariaChecked = String(!!this.checked);
+    this.#internals.ariaDisabled = String(!!this.disabled);
+    this.#internals.ariaLabel = this.accessibleLabel || null;
+    this.#internals.setFormValue(this.checked ? (this.value ?? null) : null);
+  }
+
+  override render(): TemplateResult<1> {
+    return html`
+      <span id="toggle" class="${this.#classes}">
+        <span id="check-icon"
+              ?hidden=${!this.showCheckIcon || (this.showCheckIcon && !this.checked)}>
+          <svg role="presentation"
+               fill="currentColor"
+               height="1em"
+               width="1em"
+               viewBox="0 0 512 512">
+            <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" />
+          </svg>
+        </span>
+      </span>
+      <span id="label"
+            class="${this.#classes}"
+            ?hidden=${this.#slots.isEmpty()}>
+        <!-- summary: Label text displayed beside the switch toggle -->
+        <slot></slot>
+      </span>
+    `;
+  }
+
+  #onClick(event: Event) {
+    // @ts-expect-error: firefox workaround for double-firing when switch is nested in a label
+    const { originalTarget, explicitOriginalTarget } = event;
+    if (explicitOriginalTarget) {
+      let labels: HTMLLabelElement[];
+      if (originalTarget === event.target
+          && !(labels = Array.from(this.labels)).includes(explicitOriginalTarget)
+          && labels.includes(this.closest('label') as HTMLLabelElement)) {
+        return;
+      }
+    }
+    this.#toggle();
+  }
+
+  #onKeyup(event: KeyboardEvent) {
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        event.preventDefault();
+        this.#toggle();
+    }
+  }
+
+  #onKeydown(event: KeyboardEvent) {
+    if (event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+
+  #toggle() {
+    if (!this.disabled) {
+      this.checked = !this.checked;
+      if (!this.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }))) {
+        this.checked = !this.checked;
+      }
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-v6-switch': PfV6Switch;
+  }
+}
diff --git a/elements/pf-v5-switch/test/pf-switch.e2e.ts b/elements/pf-v6-switch/test/pf-v6-switch.e2e.ts
similarity index 95%
rename from elements/pf-v5-switch/test/pf-switch.e2e.ts
rename to elements/pf-v6-switch/test/pf-v6-switch.e2e.ts
index 5b41db14f6..c3ba613d2f 100644
--- a/elements/pf-v5-switch/test/pf-switch.e2e.ts
+++ b/elements/pf-v6-switch/test/pf-v6-switch.e2e.ts
@@ -2,7 +2,7 @@ import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
 import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 
-const tagName = 'pf-v5-switch';
+const tagName = 'pf-v6-switch';
 
 test.describe(tagName, () => {
   test('snapshot', async ({ page }) => {
diff --git a/elements/pf-v6-switch/test/pf-v6-switch.spec.ts b/elements/pf-v6-switch/test/pf-v6-switch.spec.ts
new file mode 100644
index 0000000000..532dfa1df7
--- /dev/null
+++ b/elements/pf-v6-switch/test/pf-v6-switch.spec.ts
@@ -0,0 +1,381 @@
+import type { A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { expect, html, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { sendKeys } from '@web/test-runner-commands';
+
+import { PfV6Switch } from '@patternfly/elements/pf-v6-switch/pf-v6-switch.js';
+
+describe('<pf-v6-switch>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-v6-switch')).to.be.an.instanceof(PfV6Switch);
+  });
+
+  describe('simply instantiating', function() {
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch accessible-label="Test"></pf-v6-switch>
+      `);
+      snapshot = await a11ySnapshot({ selector: 'pf-v6-switch' });
+    });
+
+    it('should upgrade', function() {
+      const klass = customElements.get('pf-v6-switch');
+      expect(element)
+          .to.be.an.instanceOf(klass)
+          .and
+          .to.be.an.instanceOf(PfV6Switch);
+    });
+
+    it('has accessible role', function() {
+      expect(snapshot.role).to.equal('switch');
+    });
+
+    it('has accessible name', function() {
+      expect(snapshot.name).to.equal('Test');
+    });
+
+    it('is not checked by default', function() {
+      expect(snapshot.checked).to.be.false;
+    });
+  });
+
+  describe('with accessible-label attribute', function() {
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch accessible-label="Dark Mode"></pf-v6-switch>
+      `);
+      snapshot = await a11ySnapshot({ selector: 'pf-v6-switch' });
+    });
+
+    it('has an accessible name from accessible-label', function() {
+      expect(snapshot.name).to.equal('Dark Mode');
+    });
+
+    it('keeps the same accessible name regardless of checked state', async function() {
+      element.focus();
+      await sendKeys({ press: ' ' });
+      await element.updateComplete;
+      await nextFrame();
+      snapshot = await a11ySnapshot({ selector: 'pf-v6-switch' });
+      expect(snapshot.name).to.equal('Dark Mode');
+    });
+  });
+
+  describe('with slotted label text', function() {
+    let element: PfV6Switch;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch>Wi-Fi enabled</pf-v6-switch>
+      `);
+      await element.updateComplete;
+    });
+
+    it('renders the label text', function() {
+      expect(element.textContent?.trim()).to.equal('Wi-Fi enabled');
+    });
+
+    it('displays the label in the accessibility tree', async function() {
+      const snapshot = await a11ySnapshot({ selector: 'pf-v6-switch' });
+      expect(snapshot.name).to.equal('Wi-Fi enabled');
+    });
+  });
+
+  describe('with external label', function() {
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      const container = await createFixture<PfV6Switch>(html`
+        <div>
+          <pf-v6-switch id="switch"></pf-v6-switch>
+          <label for="switch">Dark Mode</label>
+        </div>
+      `);
+      element = container.querySelector('pf-v6-switch')!;
+      snapshot = await a11ySnapshot({ selector: '#switch' });
+    });
+
+    it('is accessible', function() {
+      expect(snapshot.role).to.equal('switch');
+      expect(snapshot.name).to.equal('Dark Mode');
+      expect(snapshot.checked).to.be.false;
+    });
+
+    describe('toggling the switch', function() {
+      beforeEach(async function() {
+        element.focus();
+        await sendKeys({ press: 'Enter' });
+        await element.updateComplete;
+        await nextFrame();
+        snapshot = await a11ySnapshot({ selector: '#switch' });
+      });
+
+      it('should be checked', function() {
+        expect(element.checked).to.be.true;
+        expect(snapshot.checked).to.be.true;
+      });
+
+      it('keeps the same label', function() {
+        expect(snapshot.name).to.equal('Dark Mode');
+      });
+    });
+  });
+
+  describe('when checked attr is present', function() {
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch id="switch" accessible-label="Test" checked></pf-v6-switch>
+      `);
+      await element.updateComplete;
+      await nextFrame();
+      snapshot = await a11ySnapshot({ selector: '#switch' });
+    });
+
+    it('should be checked', function() {
+      expect(element.checked).to.be.true;
+      expect(snapshot.checked).to.be.true;
+    });
+  });
+
+  describe('when checked attr is not present', function() {
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch id="switch" accessible-label="Test"></pf-v6-switch>
+      `);
+      await element.updateComplete;
+      await nextFrame();
+      snapshot = await a11ySnapshot({ selector: '#switch' });
+    });
+
+    it('should not be checked', function() {
+      expect(element.checked).to.be.false;
+      expect(snapshot.checked).to.be.false;
+    });
+  });
+
+  describe('when checked and show-check-icon attrs are present', function() {
+    let element: PfV6Switch;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch show-check-icon checked>Check icon example</pf-v6-switch>
+      `);
+    });
+
+    it('has the show-check-icon attribute', function() {
+      expect(element.showCheckIcon).to.be.true;
+      expect(element.hasAttribute('show-check-icon')).to.be.true;
+    });
+  });
+
+  describe('when disabled', function() {
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch accessible-label="Test" disabled></pf-v6-switch>
+      `);
+      snapshot = await a11ySnapshot({ selector: 'pf-v6-switch' });
+    });
+
+    it('reports disabled in accessibility tree', function() {
+      expect(snapshot.disabled).to.be.true;
+    });
+
+    it('does not toggle when clicked', function() {
+      element.click();
+      expect(element.checked).to.be.false;
+    });
+  });
+
+  describe('when reversed', function() {
+    let element: PfV6Switch;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch reversed checked>Reversed label</pf-v6-switch>
+      `);
+    });
+
+    it('has the reversed attribute', function() {
+      expect(element.reversed).to.be.true;
+      expect(element.hasAttribute('reversed')).to.be.true;
+    });
+  });
+
+  describe('when nested inside a label element', function() {
+    let label: HTMLLabelElement;
+    let element: PfV6Switch;
+    let snapshot: A11yTreeSnapshot;
+    beforeEach(async function() {
+      label = await createFixture<HTMLLabelElement>(html`
+        <label>
+          <span>Dark Mode</span>
+          <pf-v6-switch id="switch"></pf-v6-switch>
+        </label>
+      `);
+      element = label.querySelector('pf-v6-switch')!;
+      snapshot = await a11ySnapshot({ selector: 'pf-v6-switch' });
+    });
+
+    it('does not hide label', function() {
+      expect(label.hidden).to.be.false;
+    });
+
+    it('has an accessible name', function() {
+      expect(snapshot.name).to.equal('Dark Mode');
+    });
+
+    describe('clicking the label', function() {
+      beforeEach(function() {
+        label.click();
+      });
+
+      it('toggles the state', function() {
+        expect(element.checked).to.be.true;
+      });
+    });
+
+    describe('pressing Space on the switch', function() {
+      beforeEach(async function() {
+        element.focus();
+        await sendKeys({ press: ' ' });
+        await element.updateComplete;
+      });
+
+      it('toggles the state', function() {
+        expect(element.checked).to.be.true;
+      });
+    });
+  });
+
+  describe('keyboard interaction', function() {
+    let element: PfV6Switch;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch accessible-label="Keyboard test"></pf-v6-switch>
+      `);
+      element.focus();
+    });
+
+    describe('pressing Space', function() {
+      beforeEach(async function() {
+        await sendKeys({ press: ' ' });
+        await element.updateComplete;
+      });
+
+      it('toggles the state', function() {
+        expect(element.checked).to.be.true;
+      });
+    });
+
+    describe('pressing Enter', function() {
+      beforeEach(async function() {
+        await sendKeys({ press: 'Enter' });
+        await element.updateComplete;
+      });
+
+      it('toggles the state', function() {
+        expect(element.checked).to.be.true;
+      });
+    });
+  });
+
+  describe('change event', function() {
+    let element: PfV6Switch;
+    let changeCount: number;
+    beforeEach(async function() {
+      changeCount = 0;
+      element = await createFixture<PfV6Switch>(html`
+        <pf-v6-switch accessible-label="Event test"></pf-v6-switch>
+      `);
+      element.addEventListener('change', () => changeCount++);
+    });
+
+    describe('toggling the switch', function() {
+      beforeEach(async function() {
+        element.focus();
+        await sendKeys({ press: ' ' });
+        await element.updateComplete;
+      });
+
+      it('fires change event', function() {
+        expect(changeCount).to.equal(1);
+      });
+    });
+
+    describe('clicking a disabled switch', function() {
+      beforeEach(function() {
+        element.disabled = true;
+        element.click();
+      });
+
+      it('does not fire change event', function() {
+        expect(changeCount).to.equal(0);
+      });
+    });
+
+    describe('preventing default on the change event', function() {
+      beforeEach(async function() {
+        element.addEventListener('change', e => e.preventDefault());
+        element.focus();
+        await sendKeys({ press: ' ' });
+        await element.updateComplete;
+      });
+
+      it('reverts the checked state', function() {
+        expect(element.checked).to.be.false;
+      });
+    });
+  });
+
+  describe('form association', function() {
+    let form: HTMLFormElement;
+    let element: PfV6Switch;
+    let submitData: FormData | null;
+    beforeEach(async function() {
+      submitData = null;
+      const container = await createFixture(html`
+        <form>
+          <pf-v6-switch name="toggle" accessible-label="Form test"></pf-v6-switch>
+          <button type="submit">Submit</button>
+        </form>
+      `);
+      form = container as HTMLFormElement;
+      element = form.querySelector('pf-v6-switch')!;
+      form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        submitData = new FormData(form);
+      });
+    });
+
+    describe('submitting when unchecked', function() {
+      beforeEach(function() {
+        form.requestSubmit();
+      });
+
+      it('does not include value in form data', function() {
+        expect(submitData!.has('toggle')).to.be.false;
+      });
+    });
+
+    describe('submitting when checked', function() {
+      beforeEach(async function() {
+        element.focus();
+        await sendKeys({ press: ' ' });
+        await element.updateComplete;
+        form.requestSubmit();
+      });
+
+      it('includes "on" value in form data', function() {
+        expect(submitData!.get('toggle')).to.equal('on');
+      });
+    });
+  });
+});