vaadin · web-padawan · May 6, 2026 · May 6, 2026 · May 6, 2026 · May 6, 2026
diff --git a/dev/playground/toggle-switch.html b/dev/playground/toggle-switch.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Toggle Switch</title>
+    <script type="module" src="../common.js"></script>
+
+    <script type="module">
+      // Enable feature flag
+      window.Vaadin ||= {};
+      window.Vaadin.featureFlags ||= {};
+      window.Vaadin.featureFlags.toggleSwitchComponent = true;
+
+      import '@vaadin/toggle-switch';
+      import '@vaadin/tooltip';
+    </script>
+  </head>
+
+  <body>
+    <section class="section">
+      <h2 class="heading">Label &amp; State</h2>
+      <vaadin-toggle-switch label="Notifications"></vaadin-toggle-switch>
+      <vaadin-toggle-switch label="Dark mode" checked></vaadin-toggle-switch>
+    </section>
+
+    <section class="section">
+      <h2 class="heading">Disabled</h2>
+      <vaadin-toggle-switch label="Daily digest" disabled></vaadin-toggle-switch>
+      <vaadin-toggle-switch label="Beta features" disabled checked></vaadin-toggle-switch>
+    </section>
+
+    <section class="section">
+      <h2 class="heading">Read-only</h2>
+      <vaadin-toggle-switch label="Audit log retention" readonly></vaadin-toggle-switch>
+      <vaadin-toggle-switch label="Account verified" readonly checked></vaadin-toggle-switch>
+    </section>
+
+    <section class="section">
+      <h2 class="heading">Required</h2>
+      <vaadin-toggle-switch label="I confirm the trip details are correct" required></vaadin-toggle-switch>
+    </section>
+
+    <section class="section">
+      <h2 class="heading">Invalid with error message</h2>
+      <vaadin-toggle-switch
+        label="Accept the terms"
+        required
+        invalid
+        error-message="You must accept the terms to continue"
+      ></vaadin-toggle-switch>
+    </section>
+
+    <section class="section">
+      <h2 class="heading">Helper text</h2>
+      <vaadin-toggle-switch
+        label="Auto-save"
+        helper-text="Save changes automatically every 30 seconds"
+      ></vaadin-toggle-switch>
+    </section>
+
+    <section class="section">
+      <h2 class="heading">With tooltip</h2>
+      <vaadin-toggle-switch label="Active">
+        <vaadin-tooltip slot="tooltip" text="Last delivery: 2 minutes ago"></vaadin-tooltip>
+      </vaadin-toggle-switch>
+    </section>
+
+    <section class="section">
+      <h2 class="heading">Label with link</h2>
+      <vaadin-toggle-switch>
+        <span slot="label">
+          Send anonymous usage data — <a href="https://vaadin.com/privacy">read our privacy policy</a>
+        </span>
+      </vaadin-toggle-switch>
+    </section>
+
+  </body>
+</html>
diff --git a/dev/toggle-switch.html b/dev/toggle-switch.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Toggle Switch</title>
+    <script type="module" src="./common.js"></script>
+    <script type="module">
+      // Enable feature flag
+      window.Vaadin ||= {};
+      window.Vaadin.featureFlags ||= {};
+      window.Vaadin.featureFlags.toggleSwitchComponent = true;
+
+      import '@vaadin/toggle-switch';
+    </script>
+  </head>
+
+  <body>
+    <vaadin-toggle-switch label="Notifications"></vaadin-toggle-switch>
+  </body>
+</html>
diff --git a/packages/aura/aura.css b/packages/aura/aura.css
@@ -39,6 +39,7 @@
 @import './src/components/side-nav.css';
 @import './src/components/slider.css';
 @import './src/components/tabs.css';
+@import './src/components/toggle-switch.css';
 @import './src/components/tooltip.css';
 @import './src/components/upload.css';
 

diff --git a/packages/aura/src/components/toggle-switch.css b/packages/aura/src/components/toggle-switch.css
@@ -0,0 +1,71 @@
+:where(:root),
+:where(:host) {
+  --vaadin-toggle-switch-size: round(1lh - 2px, 2px);
+}
+
+vaadin-toggle-switch::part(switch) {
+  transition:
+    background-color 100ms,
+    box-shadow 100ms;
+}
+
+vaadin-toggle-switch:not([disabled], [readonly])::part(switch) {
+  --aura-surface-level: 4;
+  background: var(--vaadin-toggle-switch-background, var(--aura-surface-color));
+  box-shadow: var(--aura-shadow-xs);
+  --_shade: color-mix(in srgb, var(--vaadin-border-color-secondary) 50%, transparent);
+  background-image: linear-gradient(
+    light-dark(transparent, var(--_shade)),
+    transparent 33%,
+    transparent 66%,
+    light-dark(var(--_shade), transparent)
+  );
+}
+
+vaadin-toggle-switch:not([checked])::part(switch) {
+  background-clip: padding-box;
+}
+
+vaadin-toggle-switch[checked]:not([readonly], [disabled])::part(switch) {
+  --vaadin-toggle-switch-background: var(--aura-accent-color);
+  --vaadin-toggle-switch-border-color: var(--vaadin-border-color-secondary);
+  --vaadin-toggle-switch-thumb-checked-color: var(--aura-accent-contrast-color);
+  background-image: none;
+  box-shadow: var(--aura-shadow-s);
+}
+
+vaadin-toggle-switch[invalid]:not([disabled], [readonly])::part(switch) {
+  --vaadin-toggle-switch-background: color-mix(in srgb, var(--aura-red) 10%, transparent);
+  --vaadin-toggle-switch-border-color: var(--aura-red-text);
+  background-image: none;
+}
+
+vaadin-toggle-switch[invalid][checked]:not([disabled], [readonly])::part(switch) {
+  --vaadin-toggle-switch-background: var(--aura-red);
+  --vaadin-toggle-switch-border-color: var(--vaadin-border-color-secondary);
+  --vaadin-toggle-switch-thumb-checked-color: var(--aura-accent-contrast-color);
+}
+
+vaadin-toggle-switch:not([disabled], [readonly])::part(switch)::before {
+  content: '';
+  position: absolute;
+  inset: calc(var(--vaadin-toggle-switch-border-width, var(--vaadin-input-field-border-width, 1px)) * -1);
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0;
+  transition:
+    opacity 100ms,
+    background-color 100ms;
+  pointer-events: none;
+}
+
+@media (any-hover: hover) {
+  vaadin-toggle-switch:hover:not([readonly], [disabled], [active])::part(switch)::before {
+    opacity: 0.04;
+  }
+}
+
+vaadin-toggle-switch[active]:not([readonly], [disabled])::part(switch)::before {
+  opacity: 0.1;
+  background: #000;
+}
diff --git a/packages/checkbox/src/vaadin-checkbox-mixin.d.ts b/packages/checkbox/src/vaadin-checkbox-mixin.d.ts
@@ -38,15 +38,6 @@ export declare function CheckboxMixin<T extends Constructor<HTMLElement>>(
   T;
 
 export declare class CheckboxMixinClass {
-  /**
-   * True if the checkbox is in the indeterminate state which means
-   * it is not possible to say whether it is checked or unchecked.
-   * The state is reset once the user switches the checkbox by hand.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
-   */
-  indeterminate: boolean;
-
   /**
    * The name of the checkbox.
    */

diff --git a/packages/checkbox/src/vaadin-checkbox-mixin.js b/packages/checkbox/src/vaadin-checkbox-mixin.js
@@ -20,20 +20,6 @@ export const CheckboxMixin = (superclass) =>
   ) {
     static get properties() {
       return {
-        /**
-         * True if the checkbox is in the indeterminate state which means
-         * it is not possible to say whether it is checked or unchecked.
-         * The state is reset once the user switches the checkbox by hand.
-         *
-         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
-         */
-        indeterminate: {
-          type: Boolean,
-          notify: true,
-          value: false,
-          reflectToAttribute: true,
-        },
-
         /**
          * The name of the checkbox.
          */
@@ -60,11 +46,6 @@ export const CheckboxMixin = (superclass) =>
       return ['__readonlyChanged(readonly, inputElement)'];
     }
 
-    /** @override */
-    static get delegateProps() {
-      return [...super.delegateProps, 'indeterminate'];
-    }
-
     /** @override */
     static get delegateAttrs() {
       return [...super.delegateAttrs, 'name', 'invalid', 'required'];
@@ -187,22 +168,6 @@ export const CheckboxMixin = (superclass) =>
       }
     }
 
-    /**
-     * Override method inherited from `CheckedMixin` to reset
-     * `indeterminate` state checkbox is toggled by the user.
-     *
-     * @param {boolean} checked
-     * @protected
-     * @override
-     */
-    _toggleChecked(checked) {
-      if (this.indeterminate) {
-        this.indeterminate = false;
-      }
-
-      super._toggleChecked(checked);
-    }
-
     /**
      * @override
      * @return {boolean}

diff --git a/packages/checkbox/src/vaadin-checkbox.d.ts b/packages/checkbox/src/vaadin-checkbox.d.ts
@@ -120,6 +120,15 @@ export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEve
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(HTMLElement))) {
+  /**
+   * True if the checkbox is in the indeterminate state which means
+   * it is not possible to say whether it is checked or unchecked.
+   * The state is reset once the user switches the checkbox by hand.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
+   */
+  indeterminate: boolean;
+
   addEventListener<K extends keyof CheckboxEventMap>(
     type: K,
     listener: (this: Checkbox, ev: CheckboxEventMap[K]) => void,

diff --git a/packages/checkbox/src/vaadin-checkbox.js b/packages/checkbox/src/vaadin-checkbox.js
@@ -96,6 +96,30 @@ export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMi
     return checkboxStyles;
   }
 
+  static get properties() {
+    return {
+      /**
+       * True if the checkbox is in the indeterminate state which means
+       * it is not possible to say whether it is checked or unchecked.
+       * The state is reset once the user switches the checkbox by hand.
+       *
+       * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
+       *
+       */
+      indeterminate: {
+        type: Boolean,
+        notify: true,
+        value: false,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
+  /** @override */
+  static get delegateProps() {
+    return [...super.delegateProps, 'indeterminate'];
+  }
+
   /** @protected */
   render() {
     return html`
@@ -125,6 +149,22 @@ export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMi
     this._tooltipController.setAriaTarget(this.inputElement);
     this.addController(this._tooltipController);
   }
+
+  /**
+   * Override method inherited from `CheckedMixin` to reset
+   * `indeterminate` when the checkbox is toggled by the user.
+   *
+   * @param {boolean} checked
+   * @protected
+   * @override
+   */
+  _toggleChecked(checked) {
+    if (this.indeterminate) {
+      this.indeterminate = false;
+    }
+
+    super._toggleChecked(checked);
+  }
 }
 
 defineCustomElement(Checkbox);