diff --git a/packages/checkbox-group/src/vaadin-checkbox-group.d.ts b/packages/checkbox-group/src/vaadin-checkbox-group.d.ts
index f8dca5015d..f3db4e31ca 100644
--- a/packages/checkbox-group/src/vaadin-checkbox-group.d.ts
+++ b/packages/checkbox-group/src/vaadin-checkbox-group.d.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { CheckboxElement } from '@vaadin/checkbox/src/vaadin-checkbox.js';
+import { Checkbox } from '@vaadin/checkbox/src/vaadin-checkbox.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -116,7 +116,7 @@ declare class CheckboxGroupElement extends ThemableMixin(DirMixin(HTMLElement))
 
   _removeCheckboxFromValue(value: string): void;
 
-  _changeSelectedCheckbox(checkbox: CheckboxElement | null): void;
+  _changeSelectedCheckbox(checkbox: Checkbox | null): void;
 
   _containsFocus(): boolean;
 
diff --git a/packages/checkbox-group/src/vaadin-checkbox-group.js b/packages/checkbox-group/src/vaadin-checkbox-group.js
index e1865fb5bd..268c46a7f6 100644
--- a/packages/checkbox-group/src/vaadin-checkbox-group.js
+++ b/packages/checkbox-group/src/vaadin-checkbox-group.js
@@ -5,7 +5,7 @@
  */
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
-import { CheckboxElement } from '@vaadin/checkbox/src/vaadin-checkbox.js';
+import { Checkbox } from '@vaadin/checkbox/src/vaadin-checkbox.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -198,15 +198,13 @@ class CheckboxGroupElement extends ThemableMixin(DirMixin(PolymerElement)) {
     this.addEventListener('focusin', () => this._setFocused(this._containsFocus()));
 
     this.addEventListener('focusout', (e) => {
-      // validate when stepping out of the checkbox group
-      if (
-        !this._checkboxes.some(
-          (checkbox) => e.relatedTarget === checkbox || checkbox.shadowRoot.contains(e.relatedTarget)
-        )
-      ) {
-        this.validate();
-        this._setFocused(false);
+      // Skip if focus is just moved to another checkbox.
+      if (this._checkboxes.some((checkbox) => checkbox.contains(e.relatedTarget))) {
+        return;
       }
+
+      this.validate();
+      this._setFocused(false);
     });
 
     const checkedChangedListener = (e) => {
@@ -264,7 +262,7 @@ class CheckboxGroupElement extends ThemableMixin(DirMixin(PolymerElement)) {
 
   /** @private */
   _filterCheckboxes(nodes) {
-    return Array.from(nodes).filter((child) => child instanceof CheckboxElement);
+    return Array.from(nodes).filter((child) => child instanceof Checkbox);
   }
 
   /** @private */
@@ -293,7 +291,7 @@ class CheckboxGroupElement extends ThemableMixin(DirMixin(PolymerElement)) {
   }
 
   /**
-   * @param {CheckboxElement} checkbox
+   * @param {Checkbox} checkbox
    * @protected
    */
   _changeSelectedCheckbox(checkbox) {
diff --git a/packages/checkbox-group/test/checkbox-group.test.js b/packages/checkbox-group/test/checkbox-group.test.js
index 66c3a2a056..72ea5e4cf3 100644
--- a/packages/checkbox-group/test/checkbox-group.test.js
+++ b/packages/checkbox-group/test/checkbox-group.test.js
@@ -1,6 +1,7 @@
-import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { fixtureSync, focusin, focusout } from '@vaadin/testing-helpers';
+import { expect } from '@esm-bundle/chai';
+import { sendKeys } from '@web/test-runner-commands';
+import { fixtureSync } from '@vaadin/testing-helpers';
 import '@polymer/polymer/lib/elements/dom-bind.js';
 import '../vaadin-checkbox-group.js';
 
@@ -139,26 +140,33 @@ describe('vaadin-checkbox-group', () => {
     expect(checkboxes[2].checked).to.be.false;
   });
 
-  it('should set focused attribute on focusin event dispatched', () => {
-    focusin(checkboxes[0]);
+  it('should set focused attribute on Tab', async () => {
+    // Focus on the first checkbox.
+    await sendKeys({ press: 'Tab' });
+
+    expect(checkboxes[0].hasAttribute('focused')).to.be.true;
     expect(group.hasAttribute('focused')).to.be.true;
   });
 
-  it('should not set focused attribute on focusin event dispatched when disabled', () => {
-    group.disabled = true;
-    focusin(checkboxes[0]);
-    expect(group.hasAttribute('focused')).to.be.false;
-  });
+  it('should remove focused attribute on Shift+Tab', async () => {
+    // Focus on the first checkbox.
+    await sendKeys({ press: 'Tab' });
 
-  it('should remove focused attribute on checkbox focusout', () => {
-    focusin(checkboxes[0]);
-    focusout(checkboxes[0]);
+    // Move focus out of the checkbox group.
+    await sendKeys({ down: 'Shift' });
+    await sendKeys({ press: 'Tab' });
+    await sendKeys({ up: 'Shift' });
+
+    expect(checkboxes[0].hasAttribute('focused')).to.be.false;
     expect(group.hasAttribute('focused')).to.be.false;
   });
 
-  it('should remove focused attribute on checkbox-group focusout', () => {
-    focusin(checkboxes[0]);
-    focusout(group);
+  it('should not set focused attribute on Tab when disabled', async () => {
+    group.disabled = true;
+    // Try to focus on the first checkbox.
+    await sendKeys({ press: 'Tab' });
+
+    expect(checkboxes[0].hasAttribute('focused')).to.be.false;
     expect(group.hasAttribute('focused')).to.be.false;
   });
 
@@ -330,23 +338,28 @@ describe('validation', () => {
     expect(group.hasAttribute('invalid')).to.be.false;
   });
 
-  it('should pass validation and set invalid when field is required and user blurs out of the group', () => {
+  it('should run validation and set invalid when field is required and user blurs out of the group', async () => {
     group.required = true;
-    focusout(group, document.body);
+
+    // Focus on the first checkbox.
+    await sendKeys({ press: 'Tab' });
+    // Move focus out of the checkbox group.
+    await sendKeys({ down: 'Shift' });
+    await sendKeys({ press: 'Tab' });
+    await sendKeys({ up: 'Shift' });
+
     expect(group.invalid).to.be.true;
   });
 
-  it('should not run validation while user is tabbing between checkboxes inside of the group', () => {
+  it('should not run validation while user is tabbing between checkboxes inside of the group', async () => {
     group.required = true;
     const spy = sinon.spy(group, 'validate');
-    focusout(group, checkboxes[1]);
-    expect(spy.called).to.be.false;
-  });
 
-  it('should not run validation while user is tabbing between checkboxes and focus moves to native checkbox', () => {
-    group.required = true;
-    const spy = sinon.spy(group, 'validate');
-    focusout(group, checkboxes[1].focusElement);
+    // Focus on the first checkbox.
+    await sendKeys({ press: 'Tab' });
+    // Focus on the second checkbox.
+    await sendKeys({ press: 'Tab' });
+
     expect(spy.called).to.be.false;
   });
 
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
index 61bbd7a304..5d3ff7d300 100644
--- a/packages/checkbox/package.json
+++ b/packages/checkbox/package.json
@@ -27,7 +27,7 @@
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
     "@vaadin/component-base": "^22.0.0-alpha6",
-    "@vaadin/vaadin-control-state-mixin": "^22.0.0-alpha6",
+    "@vaadin/field-base": "^22.0.0-alpha6",
     "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
     "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
     "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
diff --git a/packages/checkbox/src/vaadin-checkbox.d.ts b/packages/checkbox/src/vaadin-checkbox.d.ts
index 6b553d0db2..8ca30df2e4 100644
--- a/packages/checkbox/src/vaadin-checkbox.d.ts
+++ b/packages/checkbox/src/vaadin-checkbox.d.ts
@@ -3,9 +3,12 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
+import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { AriaLabelMixin } from '@vaadin/field-base/src/aria-label-mixin.js';
+import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
+import { InputSlotMixin } from '@vaadin/field-base/src/input-slot-mixin.js';
+import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -18,95 +21,82 @@ export type CheckboxCheckedChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type CheckboxIndeterminateChangedEvent = CustomEvent<{ value: boolean }>;
 
-export interface CheckboxElementEventMap {
+export interface CheckboxCustomEventMap {
   'checked-changed': CheckboxCheckedChangedEvent;
 
   'indeterminate-changed': CheckboxIndeterminateChangedEvent;
 }
 
-export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxElementEventMap {}
+export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEventMap {}
 
 /**
- * `<vaadin-checkbox>` is a Web Component for customized checkboxes.
+ * `<vaadin-checkbox>` is an input field representing a binary choice.
  *
  * ```html
- * <vaadin-checkbox>
- *   Make my profile visible
- * </vaadin-checkbox>
+ * <vaadin-checkbox>I accept the terms and conditions</vaadin-checkbox>
  * ```
  *
  * ### Styling
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name         | Description
- * ------------------|----------------
- * `checkbox`        | The wrapper element for the native <input type="checkbox">
- * `label`           | The wrapper element in which the component's children, namely the label, is slotted
+ * Part name   | Description
+ * ------------|----------------
+ * `container` | The container element
+ * `checkbox`  | The wrapper element that contains slotted `<input type="checkbox">`
+ * `label`     | The wrapper element that contains slotted `<label>`
  *
  * The following state attributes are available for styling:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|--------------
- * `active`     | Set when the checkbox is pressed down, either with mouse, touch or the keyboard. | `:host`
- * `disabled`   | Set when the checkbox is disabled. | `:host`
- * `focus-ring` | Set when the checkbox is focused using the keyboard. | `:host`
- * `focused`    | Set when the checkbox is focused. | `:host`
- * `indeterminate` | Set when the checkbox is in indeterminate mode. | `:host`
- * `checked` | Set when the checkbox is checked. | `:host`
- * `empty` | Set when there is no label provided. | `label`
+ * Attribute       | Description | Part name
+ * ----------------|-------------|--------------
+ * `active`        | Set when the checkbox is pressed down, either with mouse, touch or the keyboard. | `:host`
+ * `disabled`      | Set when the checkbox is disabled. | `:host`
+ * `focus-ring`    | Set when the checkbox is focused using the keyboard. | `:host`
+ * `focused`       | Set when the checkbox is focused. | `:host`
+ * `indeterminate` | Set when the checkbox is in the indeterminate state. | `:host`
+ * `checked`       | Set when the checkbox is checked. | `:host`
+ * `has-label`     | Set when the checkbox has a label. | `:host`
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
- * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
  * @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes.
  */
-declare class CheckboxElement extends ElementMixin(
-  ControlStateMixin(ThemableMixin(GestureEventListeners(HTMLElement)))
+declare class Checkbox extends SlotLabelMixin(
+  CheckedMixin(InputSlotMixin(AriaLabelMixin(ActiveMixin(ElementMixin(ThemableMixin(HTMLElement))))))
 ) {
-  readonly focusElement: HTMLInputElement;
-
-  /**
-   * Name of the element.
-   */
-  name: string;
-
   /**
-   * True if the checkbox is checked.
-   */
-  checked: boolean;
-
-  /**
-   * Indeterminate state of the checkbox when it's neither checked nor unchecked, but undetermined.
+   * 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 value given to the data submitted with the checkbox's name to the server when the control is inside a form.
+   * The name of the checkbox.
    */
-  value: string | null | undefined;
-
-  _toggleChecked(): void;
+  name: string;
 
   addEventListener<K extends keyof CheckboxEventMap>(
     type: K,
-    listener: (this: CheckboxElement, ev: CheckboxEventMap[K]) => void,
+    listener: (this: Checkbox, ev: CheckboxEventMap[K]) => void,
     options?: boolean | AddEventListenerOptions
   ): void;
 
   removeEventListener<K extends keyof CheckboxEventMap>(
     type: K,
-    listener: (this: CheckboxElement, ev: CheckboxEventMap[K]) => void,
+    listener: (this: Checkbox, ev: CheckboxEventMap[K]) => void,
     options?: boolean | EventListenerOptions
   ): void;
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'vaadin-checkbox': CheckboxElement;
+    'vaadin-checkbox': Checkbox;
   }
 }
 
-export { CheckboxElement };
+export { Checkbox };
diff --git a/packages/checkbox/src/vaadin-checkbox.js b/packages/checkbox/src/vaadin-checkbox.js
index a31a534f64..e847c149a0 100644
--- a/packages/checkbox/src/vaadin-checkbox.js
+++ b/packages/checkbox/src/vaadin-checkbox.js
@@ -4,54 +4,64 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
+import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { AriaLabelMixin } from '@vaadin/field-base/src/aria-label-mixin.js';
+import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
+import { InputSlotMixin } from '@vaadin/field-base/src/input-slot-mixin.js';
+import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
- * `<vaadin-checkbox>` is a Web Component for customized checkboxes.
+ * `<vaadin-checkbox>` is an input field representing a binary choice.
  *
  * ```html
- * <vaadin-checkbox>
- *   Make my profile visible
- * </vaadin-checkbox>
+ * <vaadin-checkbox>I accept the terms and conditions</vaadin-checkbox>
  * ```
  *
  * ### Styling
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name         | Description
- * ------------------|----------------
- * `checkbox`        | The wrapper element for the native <input type="checkbox">
- * `label`           | The wrapper element in which the component's children, namely the label, is slotted
+ * Part name   | Description
+ * ------------|----------------
+ * `container` | The container element.
+ * `checkbox`  | The wrapper element that contains slotted <input type="checkbox">.
+ * `label`     | The wrapper element that contains slotted <label>.
  *
  * The following state attributes are available for styling:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|--------------
- * `active`     | Set when the checkbox is pressed down, either with mouse, touch or the keyboard. | `:host`
- * `disabled`   | Set when the checkbox is disabled. | `:host`
- * `focus-ring` | Set when the checkbox is focused using the keyboard. | `:host`
- * `focused`    | Set when the checkbox is focused. | `:host`
- * `indeterminate` | Set when the checkbox is in indeterminate mode. | `:host`
- * `checked` | Set when the checkbox is checked. | `:host`
- * `empty` | Set when there is no label provided. | `label`
+ * Attribute       | Description | Part name
+ * ----------------|-------------|--------------
+ * `active`        | Set when the checkbox is pressed down, either with mouse, touch or the keyboard. | `:host`
+ * `disabled`      | Set when the checkbox is disabled. | `:host`
+ * `focus-ring`    | Set when the checkbox is focused using the keyboard. | `:host`
+ * `focused`       | Set when the checkbox is focused. | `:host`
+ * `indeterminate` | Set when the checkbox is in the indeterminate state. | `:host`
+ * `checked`       | Set when the checkbox is checked. | `:host`
+ * `has-label`     | Set when the checkbox has a label. | `:host`
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
- * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
  * @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes.
  *
  * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ControlStateMixin
  * @mixes ThemableMixin
- * @mixes GestureEventListeners
+ * @mixes ElementMixin
+ * @mixes ActiveMixin
+ * @mixes AriaLabelMixin
+ * @mixes InputSlotMixin
+ * @mixes CheckedMixin
+ * @mixes SlotLabelMixin
  */
-class CheckboxElement extends ElementMixin(ControlStateMixin(ThemableMixin(GestureEventListeners(PolymerElement)))) {
+class Checkbox extends SlotLabelMixin(
+  CheckedMixin(InputSlotMixin(AriaLabelMixin(ActiveMixin(ElementMixin(ThemableMixin(PolymerElement))))))
+) {
+  static get is() {
+    return 'vaadin-checkbox';
+  }
+
   static get template() {
     return html`
       <style>
@@ -63,19 +73,17 @@ class CheckboxElement extends ElementMixin(ControlStateMixin(ThemableMixin(Gestu
           display: none !important;
         }
 
-        label {
-          display: inline-flex;
-          align-items: baseline;
-          outline: none;
+        :host([disabled]) {
+          -webkit-tap-highlight-color: transparent;
         }
 
-        [part='checkbox'] {
-          position: relative;
-          display: inline-block;
-          flex: none;
+        [part='container'] {
+          display: inline-flex;
+          align-items: baseline;
         }
 
-        input[type='checkbox'] {
+        /* visually hidden */
+        [part='checkbox'] ::slotted(input) {
           position: absolute;
           top: 0;
           left: 0;
@@ -86,248 +94,116 @@ class CheckboxElement extends ElementMixin(ControlStateMixin(ThemableMixin(Gestu
           cursor: inherit;
           margin: 0;
         }
-
-        :host([disabled]) {
-          -webkit-tap-highlight-color: transparent;
-        }
       </style>
-
-      <label>
-        <span part="checkbox">
-          <input
-            type="checkbox"
-            checked="{{checked::change}}"
-            disabled$="[[disabled]]"
-            indeterminate="{{indeterminate::change}}"
-            role="presentation"
-            tabindex="-1"
-          />
-        </span>
-
-        <span part="label">
-          <slot></slot>
-        </span>
-      </label>
+      <div part="container">
+        <div part="checkbox">
+          <slot name="input"></slot>
+        </div>
+        <div part="label">
+          <slot name="label"></slot>
+        </div>
+        <div style="display: none !important">
+          <slot id="noop"></slot>
+        </div>
+      </div>
     `;
   }
 
-  static get is() {
-    return 'vaadin-checkbox';
-  }
-
   static get properties() {
     return {
       /**
-       * True if the checkbox is checked.
-       * @type {boolean}
-       */
-      checked: {
-        type: Boolean,
-        value: false,
-        notify: true,
-        observer: '_checkedChanged',
-        reflectToAttribute: true
-      },
-
-      /**
-       * Indeterminate state of the checkbox when it's neither checked nor unchecked, but undetermined.
+       * 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
+       *
        * @type {boolean}
        */
       indeterminate: {
         type: Boolean,
         notify: true,
-        observer: '_indeterminateChanged',
-        reflectToAttribute: true,
-        value: false
+        value: false,
+        reflectToAttribute: true
       },
 
       /**
-       * The value given to the data submitted with the checkbox's name to the server when the control is inside a form.
+       * The name of the checkbox.
+       *
+       * @type {string}
        */
-      value: {
+      name: {
         type: String,
-        value: 'on'
-      },
-
-      /** @private */
-      _nativeCheckbox: {
-        type: Object
+        value: ''
       }
     };
   }
 
-  constructor() {
-    super();
-    /**
-     * @type {string}
-     * Name of the element.
-     */
-    this.name;
-  }
-
-  get name() {
-    return this.checked ? this._storedName : '';
-  }
-
-  set name(name) {
-    this._storedName = name;
-  }
-
-  ready() {
-    super.ready();
-
-    this.setAttribute('role', 'checkbox');
-
-    this._nativeCheckbox = this.shadowRoot.querySelector('input[type="checkbox"]');
-
-    this.addEventListener('click', this._handleClick.bind(this));
-
-    this._addActiveListeners();
-
-    const attrName = this.getAttribute('name');
-    if (attrName) {
-      this.name = attrName;
-    }
-
-    this.shadowRoot
-      .querySelector('[part~="label"]')
-      .querySelector('slot')
-      .addEventListener('slotchange', this._updateLabelAttribute.bind(this));
-
-    this._updateLabelAttribute();
-  }
-
-  /** @private */
-  _updateLabelAttribute() {
-    const label = this.shadowRoot.querySelector('[part~="label"]');
-    const assignedNodes = label.firstElementChild.assignedNodes();
-    if (this._isAssignedNodesEmpty(assignedNodes)) {
-      label.setAttribute('empty', '');
-    } else {
-      label.removeAttribute('empty');
-    }
+  /** @override */
+  static get delegateProps() {
+    return [...super.delegateProps, 'indeterminate'];
   }
 
-  /** @private */
-  _isAssignedNodesEmpty(nodes) {
-    // The assigned nodes considered to be empty if there is no slotted content or only one empty text node
-    return (
-      nodes.length === 0 ||
-      (nodes.length == 1 && nodes[0].nodeType == Node.TEXT_NODE && nodes[0].textContent.trim() === '')
-    );
+  /** @override */
+  static get delegateAttrs() {
+    return [...super.delegateAttrs, 'name'];
   }
 
-  /** @private */
-  _checkedChanged(checked) {
-    if (this.indeterminate) {
-      this.setAttribute('aria-checked', 'mixed');
-    } else {
-      this.setAttribute('aria-checked', Boolean(checked));
-    }
-  }
-
-  /** @private */
-  _indeterminateChanged(indeterminate) {
-    if (indeterminate) {
-      this.setAttribute('aria-checked', 'mixed');
-    } else {
-      this.setAttribute('aria-checked', this.checked);
-    }
-  }
-
-  /** @private */
-  _addActiveListeners() {
-    // DOWN
-    this._addEventListenerToNode(this, 'down', (e) => {
-      if (this.__interactionsAllowed(e)) {
-        this.setAttribute('active', '');
-      }
-    });
-
-    // UP
-    this._addEventListenerToNode(this, 'up', () => this.removeAttribute('active'));
-
-    // KEYDOWN
-    this.addEventListener('keydown', (e) => {
-      if (this.__interactionsAllowed(e) && e.keyCode === 32) {
-        e.preventDefault();
-        this.setAttribute('active', '');
-      }
-    });
+  constructor() {
+    super();
 
-    // KEYUP
-    this.addEventListener('keyup', (e) => {
-      if (this.__interactionsAllowed(e) && e.keyCode === 32) {
-        e.preventDefault();
-        this._toggleChecked();
-        this.removeAttribute('active');
+    this._setType('checkbox');
 
-        if (this.indeterminate) {
-          this.indeterminate = false;
-        }
-      }
-    });
+    // Set the string "on" as the default value for the checkbox following the HTML specification:
+    // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
+    this.value = 'on';
   }
 
   /**
-   * @return {!HTMLInputElement}
+   * A reference to the default slot from which nodes are forwarded to the label node.
+   *
+   * @override
    * @protected
+   * @type {HTMLSlotElement}
    */
-  get focusElement() {
-    return this.shadowRoot.querySelector('input');
+  get _sourceSlot() {
+    return this.$.noop;
   }
 
   /**
-   * True if users' interactions (mouse or keyboard)
-   * should toggle the checkbox
+   * Extends the method from `ActiveMixin` in order to
+   * prevent setting the `active` attribute when interacting with a link inside the label.
+   *
+   * @param {Event} event
+   * @return {boolean}
+   * @protected
+   * @override
    */
-  __interactionsAllowed(e) {
-    if (this.disabled) {
+  _shouldSetActive(event) {
+    if (event.target.localName === 'a') {
       return false;
     }
 
-    // https://github.com/vaadin/vaadin-checkbox/issues/63
-    if (e.target.localName === 'a') {
-      return false;
-    }
-
-    return true;
-  }
-
-  /** @private */
-  _handleClick(e) {
-    if (this.__interactionsAllowed(e)) {
-      if (!this.indeterminate) {
-        if (e.composedPath()[0] !== this._nativeCheckbox) {
-          e.preventDefault();
-          this._toggleChecked();
-        }
-      } else {
-        /*
-         * Required for IE 11 and Edge.
-         * See issue here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7344418/
-         */
-        this.indeterminate = false;
-        e.preventDefault();
-        this._toggleChecked();
-      }
-    }
-  }
-
-  /** @protected */
-  _toggleChecked() {
-    this.checked = !this.checked;
-    this.dispatchEvent(new CustomEvent('change', { composed: false, bubbles: true }));
+    return super._shouldSetActive(event);
   }
 
   /**
-   * Fired when the user commits a value change.
+   * Extends the method from `CheckedMixin` in order to
+   * reset the indeterminate state once the user switches the checkbox.
    *
-   * @event change
+   * @param {boolean} checked
+   * @protected
+   * @override
    */
+  _toggleChecked(checked) {
+    if (this.indeterminate) {
+      this.indeterminate = false;
+    }
+
+    super._toggleChecked(checked);
+  }
 }
 
-customElements.define(CheckboxElement.is, CheckboxElement);
+customElements.define(Checkbox.is, Checkbox);
 
-export { CheckboxElement };
+export { Checkbox };
diff --git a/packages/checkbox/test/a11y.test.js b/packages/checkbox/test/a11y.test.js
deleted file mode 100644
index 2f8d2ce74f..0000000000
--- a/packages/checkbox/test/a11y.test.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { expect } from '@esm-bundle/chai';
-import { fixtureSync } from '@vaadin/testing-helpers';
-import '../vaadin-checkbox.js';
-
-describe('a11y', () => {
-  let checkbox;
-
-  beforeEach(() => {
-    checkbox = fixtureSync('<vaadin-checkbox>Vaadin <i>Checkbox</i></vaadin-checkbox>');
-  });
-
-  it('should set aria-checked to "true" when checked is set to true', () => {
-    checkbox.checked = true;
-    expect(checkbox.getAttribute('aria-checked')).to.be.eql('true');
-  });
-
-  it('should set aria-checked to "false" when checked is set to false', () => {
-    checkbox.checked = false;
-    expect(checkbox.getAttribute('aria-checked')).to.be.eql('false');
-  });
-
-  it('should set aria-checked to "mixed" when indeterminate is set to true', () => {
-    checkbox.indeterminate = true;
-    expect(checkbox.getAttribute('aria-checked')).to.be.eql('mixed');
-  });
-
-  it('should set aria-checked to "mixed" when indeterminate is first set to true, then checked is set to false', () => {
-    checkbox.indeterminate = true;
-    checkbox.checked = false;
-    expect(checkbox.getAttribute('aria-checked')).to.be.eql('mixed');
-  });
-
-  it('should set aria-checked to "mixed" when checked is first set to false, then indeterminate is set to true', () => {
-    checkbox.checked = false;
-    checkbox.indeterminate = true;
-    expect(checkbox.getAttribute('aria-checked')).to.be.eql('mixed');
-  });
-
-  it('should set aria-checked to "mixed" when indeterminate is first set to true, then checked is set to true', () => {
-    checkbox.indeterminate = true;
-    checkbox.checked = true;
-    expect(checkbox.getAttribute('aria-checked')).to.be.eql('mixed');
-  });
-
-  it('should set aria-checked to "mixed" when checked is first set to true, then indeterminate is set to true', () => {
-    checkbox.checked = true;
-    checkbox.indeterminate = true;
-    expect(checkbox.getAttribute('aria-checked')).to.be.eql('mixed');
-  });
-
-  it('should set aria-checked to "false" when checked is set to null', () => {
-    checkbox.checked = null;
-    expect(checkbox.getAttribute('aria-checked')).to.eql('false');
-  });
-});
diff --git a/packages/checkbox/test/checkbox.test.js b/packages/checkbox/test/checkbox.test.js
index 36eb743a64..9cdda07693 100644
--- a/packages/checkbox/test/checkbox.test.js
+++ b/packages/checkbox/test/checkbox.test.js
@@ -1,274 +1,284 @@
-import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { click, fixtureSync, mousedown, mouseup, nextFrame, space, spaceKeyDown } from '@vaadin/testing-helpers';
+import { expect } from '@esm-bundle/chai';
+import { sendKeys } from '@web/test-runner-commands';
+import { fixtureSync, mousedown, mouseup, nextFrame } from '@vaadin/testing-helpers';
 import '../vaadin-checkbox.js';
 
 describe('checkbox', () => {
-  let checkbox, nativeCheckbox, label;
-
-  const down = (node) => {
-    node.dispatchEvent(new CustomEvent('down'));
-  };
-
-  const up = (node) => {
-    node.dispatchEvent(new CustomEvent('up'));
-  };
-
-  beforeEach(() => {
-    checkbox = fixtureSync(
-      '<vaadin-checkbox name="test-checkbox">Vaadin <i>Checkbox</i> with <a href="#">Terms &amp; Conditions</a></vaadin-checkbox>'
-    );
-    nativeCheckbox = checkbox._nativeCheckbox;
-    label = checkbox.shadowRoot.querySelector('[part="label"]');
-  });
-
-  it('should define checkbox label using light DOM', () => {
-    const slot = label.querySelector('slot');
-    const nodes = slot.assignedNodes({ flatten: true });
-    expect(nodes[0].textContent).to.be.equal('Vaadin ');
-    expect(nodes[1].outerHTML).to.be.equal('<i>Checkbox</i>');
-  });
+  let checkbox, input, label, link;
 
-  it('should have input as focusElement', () => {
-    expect(checkbox.focusElement).to.be.eql(nativeCheckbox);
-  });
-
-  it('can be disabled imperatively', () => {
-    checkbox.disabled = true;
-    expect(nativeCheckbox.hasAttribute('disabled')).to.be.eql(true);
-  });
-
-  it('has default value "on"', () => {
-    expect(checkbox.value).to.be.eql('on');
-  });
+  describe('custom element definition', () => {
+    let tagName;
 
-  it('fires click event', () => {
-    const spy = sinon.spy();
-    checkbox.addEventListener('click', spy);
+    beforeEach(() => {
+      checkbox = fixtureSync('<vaadin-checkbox></vaadin-checkbox>');
+      tagName = checkbox.tagName.toLowerCase();
+    });
 
-    mousedown(checkbox);
-    mouseup(checkbox);
-    click(checkbox);
+    it('should be defined in custom element registry', () => {
+      expect(customElements.get(tagName)).to.be.ok;
+    });
 
-    expect(spy.calledOnce).to.be.true;
+    it('should have a valid static "is" getter', () => {
+      expect(customElements.get(tagName).is).to.equal(tagName);
+    });
   });
 
-  it('should have proper name', () => {
-    expect(checkbox.name).to.eq('');
-    checkbox.checked = true;
-    expect(checkbox.name).to.eq('test-checkbox');
-  });
+  describe('default', () => {
+    beforeEach(() => {
+      checkbox = fixtureSync('<vaadin-checkbox>I accept <a href="#">the terms and conditions</a></vaadin-checkbox>');
+      input = checkbox.inputElement;
+      label = checkbox._labelNode;
+      link = label.children[0];
+    });
 
-  it('should have display: none when hidden', () => {
-    checkbox.setAttribute('hidden', '');
-    expect(getComputedStyle(checkbox).display).to.equal('none');
-  });
+    // TODO: A legacy test. Replace with snapshot tests when possible.
+    it('should display the label', () => {
+      expect(label.textContent).to.equal('I accept the terms and conditions');
+    });
 
-  it('should toggle on host click', () => {
-    checkbox.click();
+    // TODO: A legacy test. Replace with snapshot tests when possible.
+    it('should be possible to disabled imperatively', () => {
+      checkbox.disabled = true;
+      expect(input.hasAttribute('disabled')).to.be.true;
+    });
 
-    expect(checkbox.checked).to.be.true;
+    // TODO: A legacy test. Replace with snapshot tests when possible.
+    it('should set value property to "on"', () => {
+      expect(checkbox.value).to.equal('on');
+    });
 
-    checkbox.click();
+    // TODO: A legacy test. Replace with snapshot tests when possible.
+    it('should set input value property to "on"', () => {
+      expect(input.value).to.equal('on');
+    });
 
-    expect(checkbox.checked).to.be.false;
-  });
+    // TODO: A legacy test. Replace with snapshot tests when possible.
+    it('should set the name to the empty string', () => {
+      expect(checkbox.name).to.equal('');
+    });
 
-  it('should not toggle on link inside host click', () => {
-    const slot = label.querySelector('slot');
-    const link = slot.assignedNodes({ flatten: true })[3];
-    expect(link.outerHTML).to.be.equal('<a href="#">Terms &amp; Conditions</a>');
-    link.click();
-    expect(checkbox.checked).to.be.false;
-  });
+    it('should have display: none when hidden', () => {
+      checkbox.setAttribute('hidden', '');
+      expect(getComputedStyle(checkbox).display).to.equal('none');
+    });
 
-  it('should not toggle on click when disabled', () => {
-    checkbox.disabled = true;
-    label.click();
-    expect(checkbox.checked).to.be.false;
-  });
+    it('should toggle checked property on input click', () => {
+      input.click();
+      expect(checkbox.checked).to.be.true;
 
-  it('should bind checked to the native checkbox and vice versa', () => {
-    checkbox.checked = true;
-    expect(nativeCheckbox.checked).to.be.eql(true);
+      input.click();
+      expect(checkbox.checked).to.be.false;
+    });
 
-    nativeCheckbox.checked = false;
-    nativeCheckbox.dispatchEvent(new CustomEvent('change'));
-    expect(checkbox.checked).to.be.eql(false);
-  });
+    it('should toggle checked property on label click', () => {
+      label.click();
+      expect(checkbox.checked).to.be.true;
 
-  it('should bind indeterminate to the native checkbox and vice versa', () => {
-    checkbox.indeterminate = true;
-    expect(nativeCheckbox.indeterminate).to.be.eql(true);
+      label.click();
+      expect(checkbox.checked).to.be.false;
+    });
 
-    nativeCheckbox.indeterminate = false;
-    nativeCheckbox.dispatchEvent(new CustomEvent('change'));
-    expect(checkbox.indeterminate).to.be.eql(false);
-  });
+    it('should not toggle checked property on label link click', () => {
+      link.click();
+      expect(checkbox.checked).to.be.false;
+    });
 
-  it('should set indeterminate to false when clicked the first time', () => {
-    checkbox.indeterminate = true;
+    it('should not toggle checked property on click when disabled', () => {
+      checkbox.disabled = true;
+      checkbox.click();
+      expect(checkbox.checked).to.be.false;
+    });
 
-    checkbox.click();
+    it('should reset indeterminate attribute on first click', () => {
+      checkbox.indeterminate = true;
+      expect(checkbox.indeterminate).to.be.true;
 
-    expect(checkbox.indeterminate).to.be.false;
-  });
+      checkbox.click();
+      expect(checkbox.indeterminate).to.be.false;
+    });
 
-  it('native checkbox should have the `presentation` role', () => {
-    expect(nativeCheckbox.getAttribute('role')).to.be.eql('presentation');
-  });
+    it('should be checked on Space press when initially checked is false and indeterminate is true', async () => {
+      checkbox.checked = false;
+      checkbox.indeterminate = true;
 
-  it('host should have the `checkbox` role', () => {
-    expect(checkbox.getAttribute('role')).to.be.eql('checkbox');
-  });
+      // Focus on the input
+      await sendKeys({ press: 'Tab' });
+      // Press Space on the input
+      await sendKeys({ press: 'Space' });
 
-  it('should have active attribute on down', () => {
-    down(checkbox);
+      expect(checkbox.checked).to.be.true;
+      expect(checkbox.indeterminate).to.be.false;
+    });
 
-    expect(checkbox.hasAttribute('active')).to.be.true;
-  });
+    it('should not be checked on Space press when initially checked is true and indeterminate is true', async () => {
+      checkbox.checked = true;
+      checkbox.indeterminate = true;
 
-  it('should not have active attribute after up', () => {
-    down(checkbox);
+      // Focus on the input
+      await sendKeys({ press: 'Tab' });
+      // Press Space on the input
+      await sendKeys({ press: 'Space' });
 
-    up(checkbox);
+      expect(checkbox.checked).to.be.false;
+      expect(checkbox.indeterminate).to.be.false;
+    });
 
-    expect(checkbox.hasAttribute('active')).to.be.false;
-  });
+    it('should be checked on click when initially checked is false and indeterminate is true', () => {
+      checkbox.checked = false;
+      checkbox.indeterminate = true;
+      checkbox.click();
 
-  it('should have active attribute on space', () => {
-    spaceKeyDown(checkbox);
+      expect(checkbox.checked).to.be.true;
+      expect(checkbox.indeterminate).to.be.false;
+    });
 
-    expect(checkbox.hasAttribute('active')).to.be.true;
-  });
+    it('should not be checked on click when initially checked is true and indeterminate is true', () => {
+      checkbox.checked = true;
+      checkbox.indeterminate = true;
+      checkbox.click();
 
-  it('should not have active attribute after space', () => {
-    space(checkbox);
+      expect(checkbox.checked).to.be.false;
+      expect(checkbox.indeterminate).to.be.false;
+    });
 
-    expect(checkbox.hasAttribute('active')).to.be.false;
-  });
+    it('should remove has-label attribute when the label was cleared', async () => {
+      label.innerHTML = '';
+      await nextFrame();
 
-  it('should be checked after space when initially checked is false and indeterminate is true', () => {
-    checkbox.checked = false;
-    checkbox.indeterminate = true;
+      expect(checkbox.hasAttribute('has-input')).to.be.false;
+    });
 
-    space(checkbox);
+    describe('active attribute', () => {
+      it('should set active attribute during input click', () => {
+        mousedown(input);
+        expect(checkbox.hasAttribute('active')).to.be.true;
+
+        mouseup(input);
+        expect(checkbox.hasAttribute('active')).to.be.false;
+      });
+
+      it('should not set active attribute during label link click', () => {
+        mousedown(link);
+        expect(checkbox.hasAttribute('active')).to.be.false;
+      });
+
+      it('should set active attribute during Space press on the input', async () => {
+        // Focus on the input
+        await sendKeys({ press: 'Tab' });
+        // Hold down Space on the input
+        await sendKeys({ down: 'Space' });
+        expect(checkbox.hasAttribute('active')).to.be.true;
+
+        // Release Space on the input
+        await sendKeys({ up: 'Space' });
+        expect(checkbox.hasAttribute('active')).to.be.false;
+      });
+    });
 
-    expect(checkbox.checked).to.be.true;
-    expect(checkbox.indeterminate).to.be.false;
-    expect(checkbox.getAttribute('aria-checked')).to.be.eql('true');
-  });
+    describe('change event', () => {
+      let changeSpy;
 
-  it('should not be checked after space when initially checked is true and indeterminate is true', () => {
-    checkbox.checked = true;
-    checkbox.indeterminate = true;
+      beforeEach(() => {
+        changeSpy = sinon.spy();
+        checkbox.addEventListener('change', changeSpy);
+      });
 
-    space(checkbox);
+      it('should not fire change event when changing checked state programmatically', () => {
+        checkbox.checked = true;
 
-    expect(checkbox.checked).to.be.false;
-    expect(checkbox.indeterminate).to.be.false;
-    expect(checkbox.getAttribute('aria-checked')).to.be.eql('false');
-  });
+        expect(changeSpy.called).to.be.false;
+      });
 
-  it('should be checked after click when initially checked is false and indeterminate is true', () => {
-    checkbox.checked = false;
-    checkbox.indeterminate = true;
+      it('should fire change event on input click', () => {
+        input.click();
+        expect(changeSpy.calledOnce).to.be.true;
 
-    checkbox.click();
+        input.click();
+        expect(changeSpy.calledTwice).to.be.true;
+      });
 
-    expect(checkbox.checked).to.be.true;
-    expect(checkbox.indeterminate).to.be.false;
-    expect(checkbox.getAttribute('aria-checked')).to.be.eql('true');
-  });
+      it('should fire change event on label click', () => {
+        label.click();
+        expect(changeSpy.calledOnce).to.be.true;
 
-  it('should not be checked after click when initially checked is true and indeterminate is true', () => {
-    checkbox.checked = true;
-    checkbox.indeterminate = true;
+        label.click();
+        expect(changeSpy.calledTwice).to.be.true;
+      });
 
-    checkbox.click();
+      it('should not fire change event on label link click', () => {
+        link.click();
+        expect(changeSpy.called).to.be.false;
+      });
 
-    expect(checkbox.checked).to.be.false;
-    expect(checkbox.indeterminate).to.be.false;
-    expect(checkbox.getAttribute('aria-checked')).to.be.eql('false');
-  });
+      it('should bubble', () => {
+        checkbox.click();
 
-  it('should set empty attribute on part label when the label was removed', async () => {
-    while (checkbox.firstChild) {
-      checkbox.removeChild(checkbox.firstChild);
-    }
+        const event = changeSpy.firstCall.args[0];
+        expect(event).to.have.property('bubbles', true);
+      });
 
-    await nextFrame();
+      it('should not be composed', () => {
+        checkbox.click();
 
-    expect(label.hasAttribute('empty')).to.be.true;
+        const event = changeSpy.firstCall.args[0];
+        expect(event).to.have.property('composed', false);
+      });
+    });
   });
 
-  describe('change event', () => {
-    let changeSpy;
-
+  describe('has-label attribute', () => {
     beforeEach(() => {
-      changeSpy = sinon.spy();
-      checkbox.addEventListener('change', changeSpy);
+      checkbox = fixtureSync('<vaadin-checkbox></vaadin-checkbox>');
     });
 
-    it('should not fire change-event when changing checked value programmatically', () => {
-      checkbox.checked = true;
-
-      expect(changeSpy.called).to.be.false;
+    it('should not set has-label attribute when label content is empty', () => {
+      expect(checkbox.hasAttribute('has-label')).to.be.false;
     });
 
-    it('should fire change-event when user checks the element', () => {
-      checkbox.click();
-
-      expect(changeSpy.calledOnce).to.be.true;
+    it('should not set has-label attribute when only one empty text node added', async () => {
+      const textNode = document.createTextNode(' ');
+      checkbox.appendChild(textNode);
+      await nextFrame();
+      expect(checkbox.hasAttribute('has-label')).to.be.false;
     });
 
-    it('should fire change-event when user unchecks the element', () => {
-      checkbox.checked = true;
-      checkbox.click();
-
-      expect(changeSpy.calledOnce).to.be.true;
+    it('should set has-label attribute when the label is added', async () => {
+      const paragraph = document.createElement('p');
+      paragraph.textContent = 'Added label';
+      checkbox.appendChild(paragraph);
+      await nextFrame();
+      expect(checkbox.hasAttribute('has-label')).to.be.true;
     });
+  });
 
-    it('should bubble', () => {
-      checkbox.click();
+  describe('delegation', () => {
+    describe('name attribute', () => {
+      beforeEach(() => {
+        checkbox = fixtureSync(`<vaadin-checkbox name="Name"></vaadin-checkbox>`);
+        input = checkbox.inputElement;
+      });
 
-      const event = changeSpy.getCall(0).args[0];
-      expect(event).to.have.property('bubbles', true);
-    });
+      it('should delegate name attribute to the input', () => {
+        expect(input.getAttribute('name')).to.equal('Name');
 
-    it('should not be composed', () => {
-      checkbox.click();
-
-      const event = changeSpy.getCall(0).args[0];
-      expect(event).to.have.property('composed', false);
+        checkbox.removeAttribute('name');
+        expect(input.hasAttribute('name')).to.be.false;
+      });
     });
-  });
-});
 
-describe('empty label', () => {
-  let checkbox, label;
+    describe('indeterminate property', () => {
+      beforeEach(() => {
+        checkbox = fixtureSync(`<vaadin-checkbox indeterminate></vaadin-checkbox>`);
+        input = checkbox.inputElement;
+      });
 
-  beforeEach(() => {
-    checkbox = fixtureSync('<vaadin-checkbox></vaadin-checkbox>');
-    label = checkbox.shadowRoot.querySelector('[part="label"]');
-  });
+      it('should delegate indeterminate property to the input', () => {
+        expect(input.indeterminate).to.be.true;
 
-  it('should set empty attribute on part label when there is no label', () => {
-    expect(label.hasAttribute('empty')).to.be.true;
-  });
-
-  it('should set empty attribute on part label when there is only one empty text node added', async () => {
-    const textNode = document.createTextNode(' ');
-    checkbox.appendChild(textNode);
-    await nextFrame();
-    expect(label.hasAttribute('empty')).to.be.true;
-  });
-
-  it('should remove empty attribute from part label when the label is added', async () => {
-    const paragraph = document.createElement('p');
-    paragraph.textContent = 'Added label';
-    checkbox.appendChild(paragraph);
-    await nextFrame();
-    expect(label.hasAttribute('empty')).to.be.false;
+        checkbox.indeterminate = false;
+        expect(input.indeterminate).to.be.false;
+      });
+    });
   });
 });
diff --git a/packages/checkbox/test/visual/lumo/checkbox.test.js b/packages/checkbox/test/visual/lumo/checkbox.test.js
index 723462c134..ddcf12aa52 100644
--- a/packages/checkbox/test/visual/lumo/checkbox.test.js
+++ b/packages/checkbox/test/visual/lumo/checkbox.test.js
@@ -1,5 +1,6 @@
-import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import { fixtureSync } from '@vaadin/testing-helpers';
 import '../../../theme/lumo/vaadin-checkbox.js';
 
 describe('checkbox', () => {
@@ -16,14 +17,9 @@ describe('checkbox', () => {
     await visualDiff(div, 'basic');
   });
 
-  it('focus-ring', async () => {
-    element.setAttribute('focus-ring', '');
-    await visualDiff(div, 'focus-ring');
-  });
-
-  it('disabled', async () => {
-    element.disabled = true;
-    await visualDiff(div, 'disabled');
+  it('empty', async () => {
+    element.label = '';
+    await visualDiff(div, 'empty');
   });
 
   it('checked', async () => {
@@ -36,25 +32,47 @@ describe('checkbox', () => {
     await visualDiff(div, 'indeterminate');
   });
 
-  it('disabled checked', async () => {
-    element.disabled = true;
-    element.checked = true;
-    await visualDiff(div, 'disabled-checked');
+  it('focus-ring', async () => {
+    await sendKeys({ press: 'Tab' });
+    await visualDiff(div, 'focus-ring');
   });
 
-  it('disabled indeterminate', async () => {
-    element.disabled = true;
-    element.indeterminate = true;
-    await visualDiff(div, 'disabled-indeterminate');
-  });
+  describe('disabled', () => {
+    beforeEach(() => {
+      element.disabled = true;
+    });
 
-  it('empty', async () => {
-    element.textContent = '';
-    await visualDiff(div, 'empty');
+    it('basic', async () => {
+      await visualDiff(div, 'disabled');
+    });
+
+    it('checked', async () => {
+      element.checked = true;
+      await visualDiff(div, 'disabled-checked');
+    });
+
+    it('indeterminate', async () => {
+      element.indeterminate = true;
+      await visualDiff(div, 'disabled-indeterminate');
+    });
   });
 
-  it('RTL', async () => {
-    document.documentElement.setAttribute('dir', 'rtl');
-    await visualDiff(div, 'rtl');
+  describe('RTL', () => {
+    before(() => {
+      document.documentElement.setAttribute('dir', 'rtl');
+    });
+
+    after(() => {
+      document.documentElement.removeAttribute('dir');
+    });
+
+    it('basic', async () => {
+      await visualDiff(div, 'rtl');
+    });
+
+    it('empty', async () => {
+      element.label = '';
+      await visualDiff(div, 'rtl-empty');
+    });
   });
 });
diff --git a/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/rtl-empty.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/rtl-empty.png
new file mode 100644
index 0000000000..3d09c8cfad
Binary files /dev/null and b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/rtl-empty.png differ
diff --git a/packages/checkbox/test/visual/material/checkbox.test.js b/packages/checkbox/test/visual/material/checkbox.test.js
index cda49ec6a5..5b7e16355f 100644
--- a/packages/checkbox/test/visual/material/checkbox.test.js
+++ b/packages/checkbox/test/visual/material/checkbox.test.js
@@ -1,5 +1,6 @@
-import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import { fixtureSync } from '@vaadin/testing-helpers';
 import '../../../theme/material/vaadin-checkbox.js';
 
 describe('checkbox', () => {
@@ -16,14 +17,9 @@ describe('checkbox', () => {
     await visualDiff(div, 'basic');
   });
 
-  it('focus-ring', async () => {
-    element.setAttribute('focus-ring', '');
-    await visualDiff(div, 'focus-ring');
-  });
-
-  it('disabled', async () => {
-    element.disabled = true;
-    await visualDiff(div, 'disabled');
+  it('empty', async () => {
+    element.label = '';
+    await visualDiff(div, 'empty');
   });
 
   it('checked', async () => {
@@ -36,25 +32,47 @@ describe('checkbox', () => {
     await visualDiff(div, 'indeterminate');
   });
 
-  it('disabled checked', async () => {
-    element.disabled = true;
-    element.checked = true;
-    await visualDiff(div, 'disabled-checked');
+  it('focus-ring', async () => {
+    await sendKeys({ press: 'Tab' });
+    await visualDiff(div, 'focus-ring');
   });
 
-  it('disabled indeterminate', async () => {
-    element.disabled = true;
-    element.indeterminate = true;
-    await visualDiff(div, 'disabled-indeterminate');
-  });
+  describe('disabled', () => {
+    beforeEach(() => {
+      element.disabled = true;
+    });
 
-  it('empty', async () => {
-    element.textContent = '';
-    await visualDiff(div, 'empty');
+    it('basic', async () => {
+      await visualDiff(div, 'disabled');
+    });
+
+    it('checked', async () => {
+      element.checked = true;
+      await visualDiff(div, 'disabled-checked');
+    });
+
+    it('indeterminate', async () => {
+      element.indeterminate = true;
+      await visualDiff(div, 'disabled-indeterminate');
+    });
   });
 
-  it('RTL', async () => {
-    document.documentElement.setAttribute('dir', 'rtl');
-    await visualDiff(div, 'rtl');
+  describe('RTL', () => {
+    before(() => {
+      document.documentElement.setAttribute('dir', 'rtl');
+    });
+
+    after(() => {
+      document.documentElement.removeAttribute('dir');
+    });
+
+    it('basic', async () => {
+      await visualDiff(div, 'rtl');
+    });
+
+    it('empty', async () => {
+      element.label = '';
+      await visualDiff(div, 'rtl-empty');
+    });
   });
 });
diff --git a/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/rtl-empty.png b/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/rtl-empty.png
new file mode 100644
index 0000000000..77e47bfadf
Binary files /dev/null and b/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/rtl-empty.png differ
diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
index 86e0ccdfe4..0171e63e6b 100644
--- a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
+++ b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
@@ -14,7 +14,7 @@ registerStyles(
       outline: none;
     }
 
-    [part='label']:not([empty]) {
+    :host([has-label]) [part='label'] {
       margin: 0.1875em 0.875em 0.1875em 0.375em;
     }
 
@@ -26,7 +26,6 @@ registerStyles(
       border-radius: var(--lumo-border-radius-s);
       background-color: var(--lumo-contrast-20pct);
       transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
-      pointer-events: none;
       line-height: 1.2;
       cursor: var(--lumo-clickable-cursor);
     }
@@ -44,6 +43,7 @@ registerStyles(
     /* Checkmark */
     [part='checkbox']::after {
       content: '';
+      pointer-events: none;
       display: inline-block;
       width: 0;
       height: 0;
@@ -106,7 +106,7 @@ registerStyles(
     }
 
     /* RTL specific styles */
-    :host([dir='rtl']) [part='label']:not([empty]) {
+    :host([dir='rtl'][has-label]) [part='label'] {
       margin: 0.1875em 0.375em 0.1875em 0.875em;
     }
 
@@ -117,6 +117,7 @@ registerStyles(
 
     /* Used for activation "halo" */
     [part='checkbox']::before {
+      pointer-events: none;
       color: transparent;
       display: inline-block;
       width: 100%;
diff --git a/packages/checkbox/theme/material/vaadin-checkbox-styles.js b/packages/checkbox/theme/material/vaadin-checkbox-styles.js
index 26acb948cb..d27eddfb61 100644
--- a/packages/checkbox/theme/material/vaadin-checkbox-styles.js
+++ b/packages/checkbox/theme/material/vaadin-checkbox-styles.js
@@ -14,7 +14,7 @@ registerStyles(
       -webkit-tap-highlight-color: transparent;
     }
 
-    [part='label']:not([empty]) {
+    :host([has-label]) [part='label'] {
       margin: 3px 12px 3px 6px;
     }
 
@@ -32,7 +32,6 @@ registerStyles(
       position: relative;
       border-radius: 2px;
       box-shadow: inset 0 0 0 2px var(--material-secondary-text-color);
-      pointer-events: none;
       line-height: 1.275;
       background-color: transparent;
     }
@@ -41,6 +40,7 @@ registerStyles(
     [part='checkbox']::before {
       /* Needed to align the checkbox nicely on the baseline */
       content: '\\2003';
+      pointer-events: none;
       display: inline-block;
       width: 100%;
       height: 100%;
@@ -55,6 +55,7 @@ registerStyles(
     /* Used for the checkmark */
     [part='checkbox']::after {
       content: '';
+      pointer-events: none;
       display: inline-block;
       width: 10px;
       height: 19px;
@@ -127,7 +128,7 @@ registerStyles(
     }
 
     /* RTL specific styles */
-    :host([dir='rtl']) [part='label']:not([empty]) {
+    :host([dir='rtl'][has-label]) [part='label'] {
       margin: 3px 6px 3px 12px;
     }
   `,
diff --git a/packages/component-base/src/active-mixin.js b/packages/component-base/src/active-mixin.js
index d90956d1cf..8672b54ac9 100644
--- a/packages/component-base/src/active-mixin.js
+++ b/packages/component-base/src/active-mixin.js
@@ -27,19 +27,15 @@ const ActiveMixinImplementation = (superclass) =>
     ready() {
       super.ready();
 
-      this._addEventListenerToNode(this, 'down', () => {
-        if (this.disabled) return;
-
-        this._setActive(true);
+      this._addEventListenerToNode(this, 'down', (event) => {
+        if (this._shouldSetActive(event)) {
+          this._setActive(true);
+        }
       });
 
       this._addEventListenerToNode(this, 'up', () => {
         this._setActive(false);
       });
-
-      this.addEventListener('blur', () => {
-        this._setActive(false);
-      });
     }
 
     /** @protected */
@@ -53,6 +49,14 @@ const ActiveMixinImplementation = (superclass) =>
       this._setActive(false);
     }
 
+    /**
+     * @param {KeyboardEvent | MouseEvent} _event
+     * @protected
+     */
+    _shouldSetActive(_event) {
+      return !this.disabled;
+    }
+
     /**
      * Sets the `active` attribute on the element if an activation key is pressed.
      *
@@ -63,7 +67,7 @@ const ActiveMixinImplementation = (superclass) =>
     _onKeyDown(event) {
       super._onKeyDown(event);
 
-      if (!this.disabled && this._activeKeys.includes(event.key)) {
+      if (this._shouldSetActive(event) && this._activeKeys.includes(event.key)) {
         this._setActive(true);
       }
     }
diff --git a/packages/component-base/test/active-mixin.test.js b/packages/component-base/test/active-mixin.test.js
index fbca8f8779..d7a484df9a 100644
--- a/packages/component-base/test/active-mixin.test.js
+++ b/packages/component-base/test/active-mixin.test.js
@@ -1,6 +1,6 @@
 import { expect } from '@esm-bundle/chai';
 import { sendKeys } from '@web/test-runner-commands';
-import { fire, fixtureSync, isIOS, mousedown, mouseup, touchend, touchstart } from '@vaadin/testing-helpers';
+import { fixtureSync, isIOS, mousedown, mouseup, touchend, touchstart } from '@vaadin/testing-helpers';
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import { ActiveMixin } from '../src/active-mixin.js';
 
@@ -104,10 +104,4 @@ describe('active-mixin', () => {
     element.parentNode.removeChild(element);
     expect(element.hasAttribute('active')).to.be.false;
   });
-
-  it('should remove active attribute on blur', async () => {
-    await sendKeys({ down: 'Space' });
-    fire(element, 'blur');
-    expect(element.hasAttribute('active')).to.be.false;
-  });
 });
diff --git a/packages/field-base/src/checked-mixin.js b/packages/field-base/src/checked-mixin.js
index c379b2bd5f..d15b374435 100644
--- a/packages/field-base/src/checked-mixin.js
+++ b/packages/field-base/src/checked-mixin.js
@@ -25,56 +25,25 @@ const CheckedMixinImplementation = (superclass) =>
       };
     }
 
-    static get delegateAttrs() {
-      return [...super.delegateAttrs, 'checked'];
+    static get delegateProps() {
+      return [...super.delegateProps, 'checked'];
     }
 
     get _delegateStateTarget() {
       return this.inputElement;
     }
 
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this.addEventListener('click', (event) => {
-        this._onClick(event);
-      });
-    }
-
-    /**
-     * @param {!MouseEvent} event
-     * @return {boolean}
-     * @protected
-     */
-    _interactionsAllowed(event) {
-      if (this.disabled) {
-        return false;
-      }
-
-      if (event.target.localName === 'a') {
-        return false;
-      }
-
-      return true;
-    }
-
     /**
-     * @param {!MouseEvent} event
      * @protected
+     * @override
      */
-    _onClick(event) {
-      if (!this._interactionsAllowed(event)) {
-        event.preventDefault();
-        return;
-      }
-
-      this._toggleChecked();
+    _onChange(event) {
+      this._toggleChecked(event.target.checked);
     }
 
     /** @protected */
-    _toggleChecked() {
-      this.checked = !this.checked;
+    _toggleChecked(checked) {
+      this.checked = checked;
     }
   };
 
diff --git a/packages/field-base/test/checked-mixin.test.js b/packages/field-base/test/checked-mixin.test.js
index ec4d9c57f5..a7e778706b 100644
--- a/packages/field-base/test/checked-mixin.test.js
+++ b/packages/field-base/test/checked-mixin.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync, click } from '@vaadin/testing-helpers';
+import { fixtureSync, fire } from '@vaadin/testing-helpers';
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import { CheckedMixin } from '../src/checked-mixin.js';
 import { InputSlotMixin } from '../src/input-slot-mixin.js';
@@ -53,6 +53,16 @@ describe('checked-mixin', () => {
       expect(element.hasAttribute('checked')).to.be.false;
     });
 
+    it('should toggle checked property on change', () => {
+      input.checked = true;
+      fire(input, 'change');
+      expect(element.checked).to.be.true;
+
+      input.checked = false;
+      fire(input, 'change');
+      expect(element.checked).to.be.false;
+    });
+
     it('should toggle checked property on click', () => {
       input.click();
       expect(element.checked).to.be.true;
@@ -71,28 +81,20 @@ describe('checked-mixin', () => {
       input.click();
       expect(element.checked).to.be.false;
     });
-
-    it('should prevent default behaviour for click event when disabled', () => {
-      element.disabled = true;
-
-      const event = click(input);
-
-      expect(event.defaultPrevented).to.be.true;
-    });
   });
 
   describe('delegation', () => {
-    describe('checked attribute', () => {
+    describe('checked property', () => {
       beforeEach(() => {
         element = fixtureSync(`<checked-mixin-element checked></checked-mixin-element>`);
         input = element.querySelector('[slot=input]');
       });
 
-      it('should delegate checked attribute to the input', () => {
-        expect(input.hasAttribute('checked')).to.be.true;
+      it('should delegate checked property to the input', () => {
+        expect(input.checked).to.be.true;
 
-        element.removeAttribute('checked');
-        expect(input.hasAttribute('checked')).to.be.false;
+        element.checked = false;
+        expect(input.checked).to.be.false;
       });
     });
   });
diff --git a/packages/vaadin-grid-pro/src/vaadin-grid-pro-edit-checkbox.js b/packages/vaadin-grid-pro/src/vaadin-grid-pro-edit-checkbox.js
index 2357ea1b39..f657cd9568 100644
--- a/packages/vaadin-grid-pro/src/vaadin-grid-pro-edit-checkbox.js
+++ b/packages/vaadin-grid-pro/src/vaadin-grid-pro-edit-checkbox.js
@@ -4,15 +4,15 @@
  * This program is available under Commercial Vaadin Developer License 4.0 (CVDLv4).
  * See <a href="https://vaadin.com/license/cvdl-4.0">the website</a> for the complete license.
  */
-import { CheckboxElement } from '@vaadin/checkbox/src/vaadin-checkbox.js';
+import { Checkbox } from '@vaadin/checkbox/src/vaadin-checkbox.js';
 
 /**
  * An element used internally by `<vaadin-grid-pro>`. Not intended to be used separately.
  *
- * @extends CheckboxElement
+ * @extends Checkbox
  * @private
  */
-class GridProEditCheckboxElement extends CheckboxElement {
+class GridProEditCheckboxElement extends Checkbox {
   static get is() {
     return 'vaadin-grid-pro-edit-checkbox';
   }
diff --git a/packages/vaadin-grid-pro/src/vaadin-grid-pro-inline-editing-mixin.js b/packages/vaadin-grid-pro/src/vaadin-grid-pro-inline-editing-mixin.js
index 22dc9b1a1c..27ac7a0a6e 100644
--- a/packages/vaadin-grid-pro/src/vaadin-grid-pro-inline-editing-mixin.js
+++ b/packages/vaadin-grid-pro/src/vaadin-grid-pro-inline-editing-mixin.js
@@ -99,11 +99,18 @@ export const InlineEditingMixin = (superClass) =>
 
       super.ready();
 
-      // Prevent click/selection on edit column
       this.$.table.addEventListener('click', (e) => {
         const column = this.getEventContext(e).column;
         if (column && this._isEditColumn(column)) {
-          e.preventDefault();
+          if (e.target.matches(':not([type=checkbox])')) {
+            // Prevents the `click` event from a column's cell in order to prevent making the cell's parent row active.
+            // Note, it should not prevent the `click` event from checkboxes. Otherwise, they will not respond to user interactions.
+            // Read more: https://github.com/vaadin/web-components/pull/2539#discussion_r712076433.
+            // TODO: Using `preventDefault()` for any other purpose than preventing the default browser's behavior is bad practice
+            // and therefore it would be great to refactor this part someday.
+            e.preventDefault();
+          }
+
           if (this.editOnClick) {
             this._enterEditFromEvent(e);
           }
@@ -243,7 +250,7 @@ export const InlineEditingMixin = (superClass) =>
           return;
         }
 
-        if (edited && edited.cell === cell && e.target.localName === column._getEditorTagName(cell)) {
+        if (edited && edited.cell === cell && column._getEditorComponent(cell).contains(e.target)) {
           return;
         }
 
diff --git a/packages/vaadin-grid-pro/test/edit-column-type.test.js b/packages/vaadin-grid-pro/test/edit-column-type.test.js
index d12faa7c4d..2060e1aa4d 100644
--- a/packages/vaadin-grid-pro/test/edit-column-type.test.js
+++ b/packages/vaadin-grid-pro/test/edit-column-type.test.js
@@ -12,7 +12,7 @@ import {
   space
 } from '@vaadin/testing-helpers';
 import { TextFieldElement } from '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
-import { CheckboxElement } from '@vaadin/checkbox/src/vaadin-checkbox.js';
+import { Checkbox } from '@vaadin/checkbox/src/vaadin-checkbox.js';
 import { Select } from '@vaadin/select/src/vaadin-select.js';
 import '@vaadin/vaadin-template-renderer';
 import { createItems, dblclick, flushGrid, getCellEditor, getContainerCell, onceOpened } from './helpers.js';
@@ -66,12 +66,12 @@ describe('edit column editor type', () => {
       cell = getContainerCell(grid.$.items, 0, 2);
       dblclick(cell._content);
       editor = column._getEditorComponent(cell);
-      expect(editor instanceof CheckboxElement).to.equal(true);
+      expect(editor instanceof Checkbox).to.equal(true);
     });
   });
 
   describe('checkbox', () => {
-    let grid, cell, column, editor;
+    let grid, cell, column, checkbox;
 
     beforeEach(() => {
       grid = fixtureSync(`
@@ -94,25 +94,40 @@ describe('edit column editor type', () => {
 
     it('should render the checkbox to cell in edit mode', () => {
       dblclick(cell._content);
-      editor = column._getEditorComponent(cell);
-      expect(editor instanceof CheckboxElement).to.equal(true);
-      expect(editor.checked).to.be.equal(grid.items[0].married);
+      checkbox = column._getEditorComponent(cell);
+      expect(checkbox instanceof Checkbox).to.equal(true);
+      expect(checkbox.checked).to.be.equal(grid.items[0].married);
     });
 
     it('should set focus-ring on the checkbox', () => {
       dblclick(cell._content);
-      editor = column._getEditorComponent(cell);
-      expect(editor.hasAttribute('focus-ring')).to.be.true;
+      checkbox = column._getEditorComponent(cell);
+      expect(checkbox.hasAttribute('focus-ring')).to.be.true;
     });
 
     it('should update value from checkbox checked after edit mode exit', () => {
       dblclick(cell._content);
-      editor = column._getEditorComponent(cell);
-      editor.click();
-      enter(editor);
+      checkbox = column._getEditorComponent(cell);
+      checkbox.click();
+      enter(checkbox);
       expect(cell._content.textContent.trim()).to.equal('false');
       expect(grid.items[0].married).to.equal(false);
     });
+
+    describe('editOnClick mode', () => {
+      beforeEach(() => {
+        grid.editOnClick = true;
+      });
+
+      it('should update value from checkbox checked after edit mode exit', () => {
+        cell._content.click();
+        checkbox = column._getEditorComponent(cell);
+        checkbox.click();
+        enter(checkbox);
+        expect(cell._content.textContent.trim()).to.equal('false');
+        expect(grid.items[0].married).to.equal(false);
+      });
+    });
   });
 
   describe('select', () => {
diff --git a/packages/vaadin-grid-pro/test/edit-column.test.js b/packages/vaadin-grid-pro/test/edit-column.test.js
index 36fcd5eb93..d2303830aa 100644
--- a/packages/vaadin-grid-pro/test/edit-column.test.js
+++ b/packages/vaadin-grid-pro/test/edit-column.test.js
@@ -640,6 +640,7 @@ describe('edit column', () => {
             <template>[[index]] [[item.name]]</template>
             <template class="footer"></template>
           </vaadin-grid-pro-edit-column>
+          <vaadin-grid-pro-edit-column path="married" editor-type="checkbox"></vaadin-grid-pro-edit-column>
           <vaadin-grid-pro-edit-column path="age"></vaadin-grid-pro-edit-column>
           <vaadin-grid-column path="name"></vaadin-grid-column>
         </vaadin-grid-pro>
@@ -658,23 +659,32 @@ describe('edit column', () => {
       expect(() => (column.path = '')).to.throw(Error);
     });
 
-    it('should not fire active-item-changed on grid edit column', () => {
-      // Propagation of click should be stopped on edit colunm
-      const spy = sinon.spy();
-      grid.addEventListener('active-item-changed', spy);
+    describe('active-item-changed event', () => {
+      let activeItemChangedSpy;
 
-      cell = getContainerCell(grid.$.items, 0, 1);
-      cell.click();
-      expect(spy.called).to.be.false;
-    });
+      beforeEach(() => {
+        activeItemChangedSpy = sinon.spy();
+        grid.addEventListener('active-item-changed', activeItemChangedSpy);
+      });
 
-    it('should fire active-item-changed on grid column', () => {
-      const spy = sinon.spy();
-      grid.addEventListener('active-item-changed', spy);
+      it('should not fire the event on cell click in the editable column', async () => {
+        cell = getContainerCell(grid.$.items, 0, 1);
+        cell._content.click();
+        expect(activeItemChangedSpy.called).to.be.false;
+      });
 
-      cell = getContainerCell(grid.$.items, 0, 2);
-      cell.click();
-      expect(spy.called).to.be.true;
+      it('should not fire the event on checkbox click in the editable column', () => {
+        cell = getContainerCell(grid.$.items, 0, 1);
+        dblclick(cell._content);
+        cell._content.querySelector('input[type=checkbox]').click();
+        expect(activeItemChangedSpy.called).to.be.false;
+      });
+
+      it('should fire the event on cell click in the not editable column', () => {
+        cell = getContainerCell(grid.$.items, 0, 3);
+        cell._content.click();
+        expect(activeItemChangedSpy.called).to.be.true;
+      });
     });
   });