@justeattakeaway/pie-checkbox 0.3.0 → 0.4.0

package/custom-elements.json

@@ -11,8 +11,26 @@
     {
       "kind": "javascript-module",
       "path": "src/defs.js",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "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": [
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -22,12 +40,6 @@
           "kind": "class",
           "description": "",
           "name": "PieCheckbox",
-          "slots": [
-            {
-              "description": "Default slot (checkbox label)",
-              "name": ""
-            }
-          ],
           "members": [
             {
               "kind": "field",
@@ -41,9 +53,6 @@
             {
               "kind": "field",
               "name": "value",
-              "type": {
-                "text": "CheckboxProps['value']"
-              },
               "privacy": "public",
               "attribute": "value"
             },
@@ -68,11 +77,9 @@
             {
               "kind": "field",
               "name": "checked",
-              "type": {
-                "text": "CheckboxProps['checked'] | undefined"
-              },
               "privacy": "public",
-              "attribute": "checked"
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -91,7 +98,6 @@
                 "text": "CheckboxProps['required'] | undefined"
               },
               "privacy": "public",
-              "default": "false",
               "attribute": "required",
               "reflects": true
             },
@@ -102,8 +108,8 @@
                 "text": "CheckboxProps['indeterminate'] | undefined"
               },
               "privacy": "public",
-              "default": "false",
-              "attribute": "indeterminate"
+              "attribute": "indeterminate",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -133,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"
             },
             {
@@ -172,9 +215,6 @@
             },
             {
               "name": "checked",
-              "type": {
-                "text": "CheckboxProps['checked'] | undefined"
-              },
               "fieldName": "checked"
             },
             {
@@ -189,7 +229,6 @@
               "type": {
                 "text": "CheckboxProps['required'] | undefined"
               },
-              "default": "false",
               "fieldName": "required"
             },
             {
@@ -197,7 +236,6 @@
               "type": {
                 "text": "CheckboxProps['indeterminate'] | undefined"
               },
-              "default": "false",
               "fieldName": "indeterminate"
             },
             {
@@ -209,6 +247,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@justeattakeaway/pie-webc-core"
+            },
             {
               "name": "RtlMixin",
               "package": "@justeattakeaway/pie-webc-core"

package/dist/index.d.ts

@@ -1,6 +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';
 
@@ -28,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;
     /**
@@ -46,9 +49,13 @@ export declare interface CheckboxProps {
     aria?: AriaProps;
 }
 
+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: {
@@ -56,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'];
@@ -71,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;
@@ -79,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,21 +1,26 @@
-import { LitElement as b, html as u, nothing as c, unsafeCSS as m } from "lit";
-import { RtlMixin as f, wrapNativeEvent as v, defineCustomElement as g } from "@justeattakeaway/pie-webc-core";
-import { property as i, query as $ } from "lit/decorators.js";
-import { ifDefined as h } from "lit/directives/if-defined.js";
-const x = `*,*:after,*:before{box-sizing:inherit}
-`;
-var C = Object.defineProperty, O = Object.getOwnPropertyDescriptor, r = (d, n, p, l) => {
-  for (var t = l > 1 ? void 0 : l ? O(n, p) : n, a = d.length - 1, s; a >= 0; a--)
-    (s = d[a]) && (t = (l ? s(n, p, t) : s(t)) || t);
-  return l && t && C(n, p, t), t;
+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,
+  checked: !1
 };
-const S = "pie-checkbox";
-class e extends f(b) {
+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 O = "pie-checkbox";
+class t extends y(v(u)) {
   constructor() {
-    super(...arguments), this.required = !1, this.indeterminate = !1, this.handleChange = (n) => {
-      const p = v(n);
-      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.
@@ -24,67 +29,99 @@ class e extends f(b) {
   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: n,
-      value: p,
-      name: l,
-      label: t,
-      disabled: a,
-      required: s,
-      indeterminate: y,
-      aria: o
+      checked: e,
+      value: n,
+      name: s,
+      label: o,
+      disabled: l,
+      required: c,
+      indeterminate: m,
+      aria: r
     } = this;
-    return u`
-        <label>
+    return b`
+        <label data-test-id="checkbox-component">
             <input
                 type="checkbox"
-                ?checked=${h(n)}
-                .value=${h(p)}
-                name=${h(l)}
-                ?disabled=${a}
-                ?required=${s}
-                .indeterminate=${y}
-                aria-label=${(o == null ? void 0 : o.label) || c}
-                aria-labelledby=${t ? c : (o == null ? void 0 : o.labelledby) || c}
-                aria-describedby= ${(o == null ? void 0 : o.describedby) || c}
+                .value=${n}
+                ?checked=${x(e)}
+                name=${C(s)}
+                ?disabled=${l}
+                ?required=${c}
+                .indeterminate=${m}
+                aria-label=${(r == null ? void 0 : r.label) || 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 = { ...b.shadowRootOptions, delegatesFocus: !0 };
-e.styles = m(x);
-r([
-  i({ type: String })
-], e.prototype, "value", 2);
-r([
-  i({ type: String })
-], e.prototype, "label", 2);
-r([
-  i({ type: String })
-], e.prototype, "name", 2);
-r([
-  i({ type: Boolean })
-], e.prototype, "checked", 2);
-r([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
-r([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "required", 2);
-r([
-  i({ type: Boolean })
-], e.prototype, "indeterminate", 2);
-r([
-  i({ type: Object })
-], e.prototype, "aria", 2);
-r([
-  $("input")
-], e.prototype, "checkbox", 2);
-g(S, 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
+  t as PieCheckbox,
+  p as defaultProps
 };

package/dist/react.d.ts

@@ -1,6 +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';
@@ -29,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;
     /**
@@ -47,11 +50,15 @@ export declare interface CheckboxProps {
     aria?: AriaProps;
 }
 
-export declare const PieCheckbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<PieCheckbox_2> & ReactBaseType>;
+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> & 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: {
@@ -59,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'];
@@ -74,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;
@@ -82,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,17 +1,23 @@
 import * as e from "react";
 import { createComponent as o } from "@lit/react";
 import { PieCheckbox as t } 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 i = o({
+const r = o({
   displayName: "PieCheckbox",
   elementClass: t,
   react: e,
   tagName: "pie-checkbox",
-  events: {}
-}), x = i;
+  events: {
+    onChange: "change"
+    // when checked state is changed.
+  }
+}), h = r;
 export {
-  x as PieCheckbox
+  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.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,7 +40,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.22.0"
+    "@justeattakeaway/pie-webc-core": "0.23.0"
   },
   "volta": {
     "extends": "../../../package.json"

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

@@ -1,3 +1,5 @@
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
 export type AriaProps = {
     label?: string;
     labelledby?: string;
@@ -25,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;
 
@@ -45,3 +47,15 @@ export interface CheckboxProps {
      */
     aria?: AriaProps;
 }
+
+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,16 +1,18 @@
 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';
 
 import styles from './checkbox.scss?inline';
-import { CheckboxProps } from './defs';
+import { CheckboxProps, defaultProps } from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -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,22 +35,22 @@ 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'];
 
     @property({ type: Boolean, reflect: true })
-    public required?: CheckboxProps['required'] = false;
+    public required?: CheckboxProps['required'] = defaultProps.required;
 
-    @property({ type: Boolean })
-    public indeterminate?: CheckboxProps['indeterminate'] = false;
+    @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>;