@justeattakeaway/pie-checkbox 0.3.1 → 0.4.0

package/custom-elements.json

@@ -18,7 +18,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    required: false,\n    indeterminate: false,\n}"
+          "default": "{\n    // a default value for the html <input type=\"checkbox\" /> value attribute.\n    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n    value: 'on',\n    required: false,\n    indeterminate: false,\n    checked: false,\n}"
         }
       ],
       "exports": [
@@ -40,12 +40,6 @@
           "kind": "class",
           "description": "",
           "name": "PieCheckbox",
-          "slots": [
-            {
-              "description": "Default slot (checkbox label)",
-              "name": ""
-            }
-          ],
           "members": [
             {
               "kind": "field",
@@ -59,9 +53,6 @@
             {
               "kind": "field",
               "name": "value",
-              "type": {
-                "text": "CheckboxProps['value']"
-              },
               "privacy": "public",
               "attribute": "value"
             },
@@ -86,11 +77,9 @@
             {
               "kind": "field",
               "name": "checked",
-              "type": {
-                "text": "CheckboxProps['checked'] | undefined"
-              },
               "privacy": "public",
-              "attribute": "checked"
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -119,7 +108,8 @@
                 "text": "CheckboxProps['indeterminate'] | undefined"
               },
               "privacy": "public",
-              "attribute": "indeterminate"
+              "attribute": "indeterminate",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -149,27 +139,64 @@
               "readonly": true
             },
             {
-              "kind": "field",
+              "kind": "method",
+              "name": "handleFormAssociation",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Ensures that the form value is in sync with the component."
+            },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The latest disabled state of the input."
+                }
+              ],
+              "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
+            },
+            {
+              "kind": "method",
               "name": "handleChange",
               "privacy": "private",
-              "description": "The onChange function updates the checkbox state and emits an event for consumers.",
               "parameters": [
                 {
-                  "description": "This should be the change event that was listened for on an input element with `type=\"checkbox\"`.",
                   "name": "event",
                   "type": {
                     "text": "Event"
-                  }
+                  },
+                  "description": "This should be the change event that was listened for on an input element with `type=\"checkbox\"`."
                 }
-              ]
+              ],
+              "description": "Captures the native change event and wraps it in a custom event."
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "value",
               "type": {
-                "text": "CheckboxProps['value']"
+                "text": "CustomEvent"
               },
+              "description": "when checked state is changed.",
+              "name": "change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
               "fieldName": "value"
             },
             {
@@ -188,9 +215,6 @@
             },
             {
               "name": "checked",
-              "type": {
-                "text": "CheckboxProps['checked'] | undefined"
-              },
               "fieldName": "checked"
             },
             {
@@ -223,6 +247,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@justeattakeaway/pie-webc-core"
+            },
             {
               "name": "RtlMixin",
               "package": "@justeattakeaway/pie-webc-core"

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
+import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
 
@@ -29,7 +31,7 @@ export declare interface CheckboxProps {
      */
     disabled?: boolean;
     /**
-     * Same as the HTML checked attribute - indicates whether or not the checkbox is checked by default (when the page loads).
+     * Indicates whether or not the checkbox is checked.
      */
     checked?: boolean;
     /**
@@ -47,13 +49,13 @@ export declare interface CheckboxProps {
     aria?: AriaProps;
 }
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'required' | 'indeterminate'>;
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked'>;
 
 export declare const defaultProps: DefaultProps;
 
 /**
  * @tagname pie-checkbox
- * @slot - Default slot (checkbox label)
+ * @event {CustomEvent} change - when checked state is changed.
  */
 export declare class PieCheckbox extends PieCheckbox_base implements CheckboxProps {
     static shadowRootOptions: {
@@ -61,10 +63,10 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
     };
-    value: CheckboxProps['value'];
+    value: string;
     label?: CheckboxProps['label'];
     name?: CheckboxProps['name'];
-    checked?: CheckboxProps['checked'];
+    checked: boolean;
     disabled?: CheckboxProps['disabled'];
     required?: CheckboxProps['required'];
     indeterminate?: CheckboxProps['indeterminate'];
@@ -76,7 +78,20 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
      */
     get validity(): ValidityState;
     /**
-     * The onChange function updates the checkbox state and emits an event for consumers.
+     * Ensures that the form value is in sync with the component.
+     */
+    private handleFormAssociation;
+    /**
+     * Called after the disabled state of the element changes,
+     * either because the disabled attribute of this element was added or removed;
+     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+     * @param disabled - The latest disabled state of the input.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    protected updated(_changedProperties: PropertyValues<this>): void;
+    /**
+     * Captures the native change event and wraps it in a custom event.
      * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
      */
     private handleChange;
@@ -84,6 +99,6 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
     static styles: CSSResult;
 }
 
-declare const PieCheckbox_base: GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
 
 export { }

package/dist/index.js

@@ -1,24 +1,26 @@
-import { LitElement as y, html as m, nothing as d, unsafeCSS as f } from "lit";
-import { RtlMixin as v, wrapNativeEvent as g, defineCustomElement as $ } from "@justeattakeaway/pie-webc-core";
-import { property as n, query as x } from "lit/decorators.js";
-import { ifDefined as h } from "lit/directives/if-defined.js";
-const q = `*,*:after,*:before{box-sizing:inherit}
-`, b = {
+import { LitElement as u, html as b, nothing as d, unsafeCSS as f } from "lit";
+import { FormControlMixin as y, RtlMixin as v, wrapNativeEvent as g, defineCustomElement as k } from "@justeattakeaway/pie-webc-core";
+import { live as x } from "lit/directives/live.js";
+import { property as a, query as $ } from "lit/decorators.js";
+import { ifDefined as C } from "lit/directives/if-defined.js";
+const F = `*,*:after,*:before{box-sizing:inherit}
+`, p = {
+  // a default value for the html <input type="checkbox" /> value attribute.
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
+  value: "on",
   required: !1,
-  indeterminate: !1
+  indeterminate: !1,
+  checked: !1
 };
-var C = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (c, i, p, a) => {
-  for (var t = a > 1 ? void 0 : a ? O(i, p) : i, l = c.length - 1, s; l >= 0; l--)
-    (s = c[l]) && (t = (a ? s(i, p, t) : s(t)) || t);
-  return a && t && C(i, p, t), t;
+var _ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, i = (h, e, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? q(e, n) : e, l = h.length - 1, c; l >= 0; l--)
+    (c = h[l]) && (o = (s ? c(e, n, o) : c(o)) || o);
+  return s && o && _(e, n, o), o;
 };
-const P = "pie-checkbox";
-class e extends v(y) {
+const O = "pie-checkbox";
+class t extends y(v(u)) {
   constructor() {
-    super(...arguments), this.required = b.required, this.indeterminate = b.indeterminate, this.handleChange = (i) => {
-      const p = g(i);
-      this.dispatchEvent(p);
-    };
+    super(...arguments), this.value = p.value, this.checked = p.checked, this.required = p.required, this.indeterminate = p.indeterminate;
   }
   /**
    * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -27,68 +29,99 @@ class e extends v(y) {
   get validity() {
     return this.checkbox.validity;
   }
+  /**
+   * Ensures that the form value is in sync with the component.
+   */
+  handleFormAssociation() {
+    !!this._internals.form && !!this.name && this._internals.setFormValue(this.checked ? this.value : null);
+  }
+  /**
+   * Called after the disabled state of the element changes,
+   * either because the disabled attribute of this element was added or removed;
+   * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+   * @param disabled - The latest disabled state of the input.
+   */
+  formDisabledCallback(e) {
+    this.disabled = e;
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.handleFormAssociation();
+  }
+  updated(e) {
+    super.updated(e), this.handleFormAssociation();
+  }
+  /**
+   * Captures the native change event and wraps it in a custom event.
+   * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
+   */
+  handleChange(e) {
+    const { checked: n } = e == null ? void 0 : e.currentTarget;
+    this.checked = n;
+    const s = g(e);
+    this.dispatchEvent(s), this.handleFormAssociation();
+  }
   render() {
     const {
-      checked: i,
-      value: p,
-      name: a,
-      label: t,
+      checked: e,
+      value: n,
+      name: s,
+      label: o,
       disabled: l,
-      required: s,
-      indeterminate: u,
+      required: c,
+      indeterminate: m,
       aria: r
     } = this;
-    return m`
-        <label>
+    return b`
+        <label data-test-id="checkbox-component">
             <input
                 type="checkbox"
-                ?checked=${h(i)}
-                .value=${h(p)}
-                name=${h(a)}
+                .value=${n}
+                ?checked=${x(e)}
+                name=${C(s)}
                 ?disabled=${l}
-                ?required=${s}
-                .indeterminate=${u}
+                ?required=${c}
+                .indeterminate=${m}
                 aria-label=${(r == null ? void 0 : r.label) || d}
-                aria-labelledby=${t ? d : (r == null ? void 0 : r.labelledby) || d}
+                aria-labelledby=${o ? d : (r == null ? void 0 : r.labelledby) || d}
                 aria-describedby= ${(r == null ? void 0 : r.describedby) || d}
                 @change=${this.handleChange}
-                data-test-id="pie-checkbox"
+                data-test-id="checkbox-input"
             />
-            ${t}
+            ${o}
         </label>`;
   }
 }
-e.shadowRootOptions = { ...y.shadowRootOptions, delegatesFocus: !0 };
-e.styles = f(q);
-o([
-  n({ type: String })
-], e.prototype, "value", 2);
-o([
-  n({ type: String })
-], e.prototype, "label", 2);
-o([
-  n({ type: String })
-], e.prototype, "name", 2);
-o([
-  n({ type: Boolean })
-], e.prototype, "checked", 2);
-o([
-  n({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
-o([
-  n({ type: Boolean, reflect: !0 })
-], e.prototype, "required", 2);
-o([
-  n({ type: Boolean })
-], e.prototype, "indeterminate", 2);
-o([
-  n({ type: Object })
-], e.prototype, "aria", 2);
-o([
-  x("input")
-], e.prototype, "checkbox", 2);
-$(P, e);
+t.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 };
+t.styles = f(F);
+i([
+  a({ type: String })
+], t.prototype, "value", 2);
+i([
+  a({ type: String })
+], t.prototype, "label", 2);
+i([
+  a({ type: String })
+], t.prototype, "name", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "checked", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "required", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "indeterminate", 2);
+i([
+  a({ type: Object })
+], t.prototype, "aria", 2);
+i([
+  $('input[type="checkbox"]')
+], t.prototype, "checkbox", 2);
+k(O, t);
 export {
-  e as PieCheckbox,
-  b as defaultProps
+  t as PieCheckbox,
+  p as defaultProps
 };

package/dist/react.d.ts

@@ -1,7 +1,9 @@
 import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
+import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
@@ -30,7 +32,7 @@ export declare interface CheckboxProps {
      */
     disabled?: boolean;
     /**
-     * Same as the HTML checked attribute - indicates whether or not the checkbox is checked by default (when the page loads).
+     * Indicates whether or not the checkbox is checked.
      */
     checked?: boolean;
     /**
@@ -48,15 +50,15 @@ export declare interface CheckboxProps {
     aria?: AriaProps;
 }
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'required' | 'indeterminate'>;
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked'>;
 
 export declare const defaultProps: DefaultProps;
 
-export declare const PieCheckbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<PieCheckbox_2> & ReactBaseType>;
+export declare const PieCheckbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<PieCheckbox_2> & PieCheckboxEvents & ReactBaseType>;
 
 /**
  * @tagname pie-checkbox
- * @slot - Default slot (checkbox label)
+ * @event {CustomEvent} change - when checked state is changed.
  */
 declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
     static shadowRootOptions: {
@@ -64,10 +66,10 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
     };
-    value: CheckboxProps['value'];
+    value: string;
     label?: CheckboxProps['label'];
     name?: CheckboxProps['name'];
-    checked?: CheckboxProps['checked'];
+    checked: boolean;
     disabled?: CheckboxProps['disabled'];
     required?: CheckboxProps['required'];
     indeterminate?: CheckboxProps['indeterminate'];
@@ -79,7 +81,20 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
      */
     get validity(): ValidityState;
     /**
-     * The onChange function updates the checkbox state and emits an event for consumers.
+     * Ensures that the form value is in sync with the component.
+     */
+    private handleFormAssociation;
+    /**
+     * Called after the disabled state of the element changes,
+     * either because the disabled attribute of this element was added or removed;
+     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+     * @param disabled - The latest disabled state of the input.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    protected updated(_changedProperties: PropertyValues<this>): void;
+    /**
+     * Captures the native change event and wraps it in a custom event.
      * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
      */
     private handleChange;
@@ -87,8 +102,12 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
     static styles: CSSResult;
 }
 
-declare const PieCheckbox_base: GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
+
+declare type PieCheckboxEvents = {
+    onChange?: (event: CustomEvent) => void;
+};
 
-declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
+declare type ReactBaseType = React_2.InputHTMLAttributes<HTMLInputElement>;
 
 export { }

package/dist/react.js

@@ -1,9 +1,10 @@
 import * as e from "react";
 import { createComponent as o } from "@lit/react";
 import { PieCheckbox as t } from "./index.js";
-import { defaultProps as h } from "./index.js";
+import { defaultProps as b } from "./index.js";
 import "lit";
 import "@justeattakeaway/pie-webc-core";
+import "lit/directives/live.js";
 import "lit/decorators.js";
 import "lit/directives/if-defined.js";
 const r = o({
@@ -11,9 +12,12 @@ const r = o({
   elementClass: t,
   react: e,
   tagName: "pie-checkbox",
-  events: {}
-}), x = r;
+  events: {
+    onChange: "change"
+    // when checked state is changed.
+  }
+}), h = r;
 export {
-  x as PieCheckbox,
-  h as defaultProps
+  h as PieCheckbox,
+  b as defaultProps
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox",
   "description": "PIE Design System Checkbox built using Web Components",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs-react.ts

@@ -1,8 +1,3 @@
 import React from 'react';
-/**
- * TODO: Verify if ReactBaseType can be set as a more specific React interface
- * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
- * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
- * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
- */
-export type ReactBaseType = React.HTMLAttributes<HTMLElement>
+
+export type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>

package/src/defs.ts

@@ -27,7 +27,7 @@ export interface CheckboxProps {
     disabled?: boolean;
 
     /**
-     * Same as the HTML checked attribute - indicates whether or not the checkbox is checked by default (when the page loads).
+     * Indicates whether or not the checkbox is checked.
      */
     checked?: boolean;
 
@@ -48,10 +48,14 @@ export interface CheckboxProps {
     aria?: AriaProps;
 }
 
-export type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'required' | 'indeterminate'>;
+export type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' >;
 
 export const defaultProps: DefaultProps = {
+    // a default value for the html <input type="checkbox" /> value attribute.
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
+    value: 'on',
     required: false,
     indeterminate: false,
+    checked: false,
 };
 

package/src/index.ts

@@ -1,11 +1,13 @@
 import {
-    LitElement, html, unsafeCSS, nothing,
+    LitElement, html, unsafeCSS, PropertyValues, nothing,
 } from 'lit';
 import {
     RtlMixin,
     defineCustomElement,
     wrapNativeEvent,
+    FormControlMixin,
 } from '@justeattakeaway/pie-webc-core';
+import { live } from 'lit/directives/live.js';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -19,13 +21,13 @@ const componentSelector = 'pie-checkbox';
 
 /**
  * @tagname pie-checkbox
- * @slot - Default slot (checkbox label)
+ * @event {CustomEvent} change - when checked state is changed.
  */
-export class PieCheckbox extends RtlMixin(LitElement) implements CheckboxProps {
+export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxProps {
     static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 
     @property({ type: String })
-    public value: CheckboxProps['value'];
+    public value = defaultProps.value;
 
     @property({ type: String })
     public label?: CheckboxProps['label'];
@@ -33,8 +35,8 @@ export class PieCheckbox extends RtlMixin(LitElement) implements CheckboxProps {
     @property({ type: String })
     public name?: CheckboxProps['name'];
 
-    @property({ type: Boolean })
-    public checked?: CheckboxProps['checked'];
+    @property({ type: Boolean, reflect: true })
+    public checked = defaultProps.checked;
 
     @property({ type: Boolean, reflect: true })
     public disabled?: CheckboxProps['disabled'];
@@ -42,13 +44,13 @@ export class PieCheckbox extends RtlMixin(LitElement) implements CheckboxProps {
     @property({ type: Boolean, reflect: true })
     public required?: CheckboxProps['required'] = defaultProps.required;
 
-    @property({ type: Boolean })
+    @property({ type: Boolean, reflect: true })
     public indeterminate?: CheckboxProps['indeterminate'] = defaultProps.indeterminate;
 
     @property({ type: Object })
     public aria: CheckboxProps['aria'];
 
-    @query('input')
+    @query('input[type="checkbox"]')
     private checkbox?: HTMLInputElement;
 
     /**
@@ -60,16 +62,51 @@ export class PieCheckbox extends RtlMixin(LitElement) implements CheckboxProps {
     }
 
     /**
-     * The onChange function updates the checkbox state and emits an event for consumers.
+     * Ensures that the form value is in sync with the component.
+     */
+    private handleFormAssociation () : void {
+        const isFormAssociated = !!this._internals.form && !!this.name;
+        if (isFormAssociated) {
+            this._internals.setFormValue(this.checked ? this.value : null);
+        }
+    }
+
+    /**
+     * Called after the disabled state of the element changes,
+     * either because the disabled attribute of this element was added or removed;
+     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+     * @param disabled - The latest disabled state of the input.
+     */
+    public formDisabledCallback (disabled: boolean): void {
+        this.disabled = disabled;
+    }
+
+    protected firstUpdated (_changedProperties: PropertyValues<this>): void {
+        super.firstUpdated(_changedProperties);
+
+        this.handleFormAssociation();
+    }
+
+    protected updated (_changedProperties: PropertyValues<this>): void {
+        super.updated(_changedProperties);
+
+        this.handleFormAssociation();
+    }
+
+    /**
+     * Captures the native change event and wraps it in a custom event.
      * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
      */
-    private handleChange = (event: Event) => {
+    private handleChange (event: Event) {
+        const { checked } = event?.currentTarget as HTMLInputElement;
+        this.checked = checked;
         // This is because some events set `composed` to `false`.
         // Reference: https://javascript.info/shadow-dom-events#event-composed
         const customChangeEvent = wrapNativeEvent(event);
-
         this.dispatchEvent(customChangeEvent);
-    };
+
+        this.handleFormAssociation();
+    }
 
     render () {
         const {
@@ -84,11 +121,11 @@ export class PieCheckbox extends RtlMixin(LitElement) implements CheckboxProps {
         } = this;
 
         return html`
-        <label>
+        <label data-test-id="checkbox-component">
             <input
                 type="checkbox"
-                ?checked=${ifDefined(checked)}
-                .value=${ifDefined(value)}
+                .value=${value}
+                ?checked=${live(checked)}
                 name=${ifDefined(name)}
                 ?disabled=${disabled}
                 ?required=${required}
@@ -97,7 +134,7 @@ export class PieCheckbox extends RtlMixin(LitElement) implements CheckboxProps {
                 aria-labelledby=${label ? nothing : aria?.labelledby || nothing}
                 aria-describedby= ${aria?.describedby || nothing}
                 @change=${this.handleChange}
-                data-test-id="pie-checkbox"
+                data-test-id="checkbox-input"
             />
             ${label}
         </label>`;

package/src/react.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent, EventName } from '@lit/react';
 import { PieCheckbox as PieCheckboxLit } from './index';
 import { CheckboxProps } from './defs';
 
@@ -10,10 +10,16 @@ const PieCheckboxReact = createComponent({
     elementClass: PieCheckboxLit,
     react: React,
     tagName: 'pie-checkbox',
-    events: {},
+    events: {
+        onChange: 'change' as EventName<CustomEvent>, // when checked state is changed.
+    },
 });
 
-type ReactBaseType = React.HTMLAttributes<HTMLElement>
+type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>
+
+type PieCheckboxEvents = {
+    onChange?: (event: CustomEvent) => void;
+};
 
 export const PieCheckbox = PieCheckboxReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<CheckboxProps>
-    & React.RefAttributes<PieCheckboxLit> & ReactBaseType>;
+    & React.RefAttributes<PieCheckboxLit> & PieCheckboxEvents & ReactBaseType>;