@react-aria/checkbox 3.11.2 → 3.12.0

package/dist/import.mjs

@@ -1,4 +1,6 @@
-import {useEffect as $cKEhs$useEffect} from "react";
+import {useEffect as $cKEhs$useEffect, useRef as $cKEhs$useRef} from "react";
+import {useFormValidation as $cKEhs$useFormValidation} from "@react-aria/form";
+import {useFormValidationState as $cKEhs$useFormValidationState, DEFAULT_VALIDATION_RESULT as $cKEhs$DEFAULT_VALIDATION_RESULT, privateValidationStateProp as $cKEhs$privateValidationStateProp} from "@react-stately/form";
 import {useToggle as $cKEhs$useToggle} from "@react-aria/toggle";
 import {filterDOMProps as $cKEhs$filterDOMProps, mergeProps as $cKEhs$mergeProps} from "@react-aria/utils";
 import {useField as $cKEhs$useField} from "@react-aria/label";
@@ -26,9 +28,21 @@ import {useToggleState as $cKEhs$useToggleState} from "@react-stately/toggle";
  * governing permissions and limitations under the License.
  */ 
 
+
+
 function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
-    let { inputProps: inputProps, isSelected: isSelected, isPressed: isPressed, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: isInvalid } = (0, $cKEhs$useToggle)(props, state, inputRef);
-    let { isIndeterminate: isIndeterminate } = props;
+    // Create validation state here because it doesn't make sense to add to general useToggleState.
+    let validationState = (0, $cKEhs$useFormValidationState)({
+        ...props,
+        value: state.isSelected
+    });
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation;
+    let { inputProps: inputProps, isSelected: isSelected, isPressed: isPressed, isDisabled: isDisabled, isReadOnly: isReadOnly } = (0, $cKEhs$useToggle)({
+        ...props,
+        isInvalid: isInvalid
+    }, state, inputRef);
+    (0, $cKEhs$useFormValidation)(props, validationState, inputRef);
+    let { isIndeterminate: isIndeterminate, isRequired: isRequired, validationBehavior: validationBehavior = "aria" } = props;
     (0, $cKEhs$useEffect)(()=>{
         // indeterminate is a property, but it can only be set via javascript
         // https://css-tricks.com/indeterminate-checkboxes/
@@ -37,13 +51,17 @@ function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
     return {
         inputProps: {
             ...inputProps,
-            checked: isSelected
+            checked: isSelected,
+            "aria-required": isRequired && validationBehavior === "aria" || undefined,
+            required: isRequired && validationBehavior === "native"
         },
         isSelected: isSelected,
         isPressed: isPressed,
         isDisabled: isDisabled,
         isReadOnly: isReadOnly,
-        isInvalid: isInvalid
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
     };
 }
 
@@ -68,28 +86,31 @@ function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */ const $1ae600c947479353$export$31440636951aa68c = new WeakMap();
-const $1ae600c947479353$export$a3077e9c93f7360f = new WeakMap();
-const $1ae600c947479353$export$d5679492e2864181 = new WeakMap();
+ */ const $1ae600c947479353$export$ec98120685d4f57d = new WeakMap();
 
 
 
 
 function $1e9fce0cfacc738b$export$49ff6f28c54f1cbe(props, state) {
-    let { isDisabled: isDisabled, name: name } = props;
+    let { isDisabled: isDisabled, name: name, validationBehavior: validationBehavior = "aria" } = props;
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $cKEhs$useField)({
         ...props,
         // Checkbox group is not an HTML input element so it
         // shouldn't be labeled by a <label> element.
-        labelElementType: "span"
+        labelElementType: "span",
+        isInvalid: isInvalid,
+        errorMessage: props.errorMessage || validationErrors
+    });
+    (0, $1ae600c947479353$export$ec98120685d4f57d).set(state, {
+        name: name,
+        descriptionId: descriptionProps.id,
+        errorMessageId: errorMessageProps.id,
+        validationBehavior: validationBehavior
     });
-    (0, $1ae600c947479353$export$a3077e9c93f7360f).set(state, descriptionProps.id);
-    (0, $1ae600c947479353$export$d5679492e2864181).set(state, errorMessageProps.id);
     let domProps = (0, $cKEhs$filterDOMProps)(props, {
         labelable: true
     });
-    // Pass name prop from group to all items by attaching to the state.
-    (0, $1ae600c947479353$export$31440636951aa68c).set(state, name);
     return {
         groupProps: (0, $cKEhs$mergeProps)(domProps, {
             role: "group",
@@ -98,7 +119,10 @@ function $1e9fce0cfacc738b$export$49ff6f28c54f1cbe(props, state) {
         }),
         labelProps: labelProps,
         descriptionProps: descriptionProps,
-        errorMessageProps: errorMessageProps
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
     };
 }
 
@@ -116,6 +140,8 @@ function $1e9fce0cfacc738b$export$49ff6f28c54f1cbe(props, state) {
  */ 
 
 
+
+
 function $fba3e38d5ca8983f$export$353b32fc6898d37d(props, state, inputRef) {
     const toggleState = (0, $cKEhs$useToggleState)({
         isReadOnly: props.isReadOnly || state.isReadOnly,
@@ -126,11 +152,44 @@ function $fba3e38d5ca8983f$export$353b32fc6898d37d(props, state, inputRef) {
             if (props.onChange) props.onChange(isSelected);
         }
     });
+    let { name: name, descriptionId: descriptionId, errorMessageId: errorMessageId, validationBehavior: validationBehavior } = (0, $1ae600c947479353$export$ec98120685d4f57d).get(state);
+    var _props_validationBehavior;
+    validationBehavior = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : validationBehavior;
+    // Local validation for this checkbox.
+    let { realtimeValidation: realtimeValidation } = (0, $cKEhs$useFormValidationState)({
+        ...props,
+        value: toggleState.isSelected,
+        // Server validation is handled at the group level.
+        name: undefined,
+        validationBehavior: "aria"
+    });
+    // Update the checkbox group state when realtime validation changes.
+    let nativeValidation = (0, $cKEhs$useRef)((0, $cKEhs$DEFAULT_VALIDATION_RESULT));
+    let updateValidation = ()=>{
+        state.setInvalid(props.value, realtimeValidation.isInvalid ? realtimeValidation : nativeValidation.current);
+    };
+    (0, $cKEhs$useEffect)(updateValidation);
+    // Combine group and checkbox level validation.
+    let combinedRealtimeValidation = state.realtimeValidation.isInvalid ? state.realtimeValidation : realtimeValidation;
+    let displayValidation = validationBehavior === "native" ? state.displayValidation : combinedRealtimeValidation;
+    var _props_isRequired;
     let res = (0, $406796ff087fe49b$export$e375f10ce42261c5)({
         ...props,
         isReadOnly: props.isReadOnly || state.isReadOnly,
         isDisabled: props.isDisabled || state.isDisabled,
-        name: props.name || (0, $1ae600c947479353$export$31440636951aa68c).get(state)
+        name: props.name || name,
+        isRequired: (_props_isRequired = props.isRequired) !== null && _props_isRequired !== void 0 ? _props_isRequired : state.isRequired,
+        validationBehavior: validationBehavior,
+        [(0, $cKEhs$privateValidationStateProp)]: {
+            realtimeValidation: combinedRealtimeValidation,
+            displayValidation: displayValidation,
+            resetValidation: state.resetValidation,
+            commitValidation: state.commitValidation,
+            updateValidation (v) {
+                nativeValidation.current = v;
+                updateValidation();
+            }
+        }
     }, toggleState, inputRef);
     return {
         ...res,
@@ -138,8 +197,8 @@ function $fba3e38d5ca8983f$export$353b32fc6898d37d(props, state, inputRef) {
             ...res.inputProps,
             "aria-describedby": [
                 props["aria-describedby"],
-                state.isInvalid ? (0, $1ae600c947479353$export$d5679492e2864181).get(state) : null,
-                (0, $1ae600c947479353$export$a3077e9c93f7360f).get(state)
+                state.isInvalid ? errorMessageId : null,
+                descriptionId
             ].filter(Boolean).join(" ") || undefined
         }
     };

package/dist/main.js

@@ -1,9 +1,12 @@
 var $k0DcK$react = require("react");
+var $k0DcK$reactariaform = require("@react-aria/form");
+var $k0DcK$reactstatelyform = require("@react-stately/form");
 var $k0DcK$reactariatoggle = require("@react-aria/toggle");
 var $k0DcK$reactariautils = require("@react-aria/utils");
 var $k0DcK$reactarialabel = require("@react-aria/label");
 var $k0DcK$reactstatelytoggle = require("@react-stately/toggle");
 
+
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
@@ -33,9 +36,21 @@ $parcel$export(module.exports, "useCheckboxGroupItem", () => $07e03121d6ac83c8$e
  * governing permissions and limitations under the License.
  */ 
 
+
+
 function $468c774d7db917b7$export$e375f10ce42261c5(props, state, inputRef) {
-    let { inputProps: inputProps, isSelected: isSelected, isPressed: isPressed, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: isInvalid } = (0, $k0DcK$reactariatoggle.useToggle)(props, state, inputRef);
-    let { isIndeterminate: isIndeterminate } = props;
+    // Create validation state here because it doesn't make sense to add to general useToggleState.
+    let validationState = (0, $k0DcK$reactstatelyform.useFormValidationState)({
+        ...props,
+        value: state.isSelected
+    });
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation;
+    let { inputProps: inputProps, isSelected: isSelected, isPressed: isPressed, isDisabled: isDisabled, isReadOnly: isReadOnly } = (0, $k0DcK$reactariatoggle.useToggle)({
+        ...props,
+        isInvalid: isInvalid
+    }, state, inputRef);
+    (0, $k0DcK$reactariaform.useFormValidation)(props, validationState, inputRef);
+    let { isIndeterminate: isIndeterminate, isRequired: isRequired, validationBehavior: validationBehavior = "aria" } = props;
     (0, $k0DcK$react.useEffect)(()=>{
         // indeterminate is a property, but it can only be set via javascript
         // https://css-tricks.com/indeterminate-checkboxes/
@@ -44,13 +59,17 @@ function $468c774d7db917b7$export$e375f10ce42261c5(props, state, inputRef) {
     return {
         inputProps: {
             ...inputProps,
-            checked: isSelected
+            checked: isSelected,
+            "aria-required": isRequired && validationBehavior === "aria" || undefined,
+            required: isRequired && validationBehavior === "native"
         },
         isSelected: isSelected,
         isPressed: isPressed,
         isDisabled: isDisabled,
         isReadOnly: isReadOnly,
-        isInvalid: isInvalid
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
     };
 }
 
@@ -75,28 +94,31 @@ function $468c774d7db917b7$export$e375f10ce42261c5(props, state, inputRef) {
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */ const $64fc3370e682155f$export$31440636951aa68c = new WeakMap();
-const $64fc3370e682155f$export$a3077e9c93f7360f = new WeakMap();
-const $64fc3370e682155f$export$d5679492e2864181 = new WeakMap();
+ */ const $64fc3370e682155f$export$ec98120685d4f57d = new WeakMap();
 
 
 
 
 function $253685172d17db7d$export$49ff6f28c54f1cbe(props, state) {
-    let { isDisabled: isDisabled, name: name } = props;
+    let { isDisabled: isDisabled, name: name, validationBehavior: validationBehavior = "aria" } = props;
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $k0DcK$reactarialabel.useField)({
         ...props,
         // Checkbox group is not an HTML input element so it
         // shouldn't be labeled by a <label> element.
-        labelElementType: "span"
+        labelElementType: "span",
+        isInvalid: isInvalid,
+        errorMessage: props.errorMessage || validationErrors
+    });
+    (0, $64fc3370e682155f$export$ec98120685d4f57d).set(state, {
+        name: name,
+        descriptionId: descriptionProps.id,
+        errorMessageId: errorMessageProps.id,
+        validationBehavior: validationBehavior
     });
-    (0, $64fc3370e682155f$export$a3077e9c93f7360f).set(state, descriptionProps.id);
-    (0, $64fc3370e682155f$export$d5679492e2864181).set(state, errorMessageProps.id);
     let domProps = (0, $k0DcK$reactariautils.filterDOMProps)(props, {
         labelable: true
     });
-    // Pass name prop from group to all items by attaching to the state.
-    (0, $64fc3370e682155f$export$31440636951aa68c).set(state, name);
     return {
         groupProps: (0, $k0DcK$reactariautils.mergeProps)(domProps, {
             role: "group",
@@ -105,7 +127,10 @@ function $253685172d17db7d$export$49ff6f28c54f1cbe(props, state) {
         }),
         labelProps: labelProps,
         descriptionProps: descriptionProps,
-        errorMessageProps: errorMessageProps
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
     };
 }
 
@@ -123,6 +148,8 @@ function $253685172d17db7d$export$49ff6f28c54f1cbe(props, state) {
  */ 
 
 
+
+
 function $07e03121d6ac83c8$export$353b32fc6898d37d(props, state, inputRef) {
     const toggleState = (0, $k0DcK$reactstatelytoggle.useToggleState)({
         isReadOnly: props.isReadOnly || state.isReadOnly,
@@ -133,11 +160,44 @@ function $07e03121d6ac83c8$export$353b32fc6898d37d(props, state, inputRef) {
             if (props.onChange) props.onChange(isSelected);
         }
     });
+    let { name: name, descriptionId: descriptionId, errorMessageId: errorMessageId, validationBehavior: validationBehavior } = (0, $64fc3370e682155f$export$ec98120685d4f57d).get(state);
+    var _props_validationBehavior;
+    validationBehavior = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : validationBehavior;
+    // Local validation for this checkbox.
+    let { realtimeValidation: realtimeValidation } = (0, $k0DcK$reactstatelyform.useFormValidationState)({
+        ...props,
+        value: toggleState.isSelected,
+        // Server validation is handled at the group level.
+        name: undefined,
+        validationBehavior: "aria"
+    });
+    // Update the checkbox group state when realtime validation changes.
+    let nativeValidation = (0, $k0DcK$react.useRef)((0, $k0DcK$reactstatelyform.DEFAULT_VALIDATION_RESULT));
+    let updateValidation = ()=>{
+        state.setInvalid(props.value, realtimeValidation.isInvalid ? realtimeValidation : nativeValidation.current);
+    };
+    (0, $k0DcK$react.useEffect)(updateValidation);
+    // Combine group and checkbox level validation.
+    let combinedRealtimeValidation = state.realtimeValidation.isInvalid ? state.realtimeValidation : realtimeValidation;
+    let displayValidation = validationBehavior === "native" ? state.displayValidation : combinedRealtimeValidation;
+    var _props_isRequired;
     let res = (0, $468c774d7db917b7$export$e375f10ce42261c5)({
         ...props,
         isReadOnly: props.isReadOnly || state.isReadOnly,
         isDisabled: props.isDisabled || state.isDisabled,
-        name: props.name || (0, $64fc3370e682155f$export$31440636951aa68c).get(state)
+        name: props.name || name,
+        isRequired: (_props_isRequired = props.isRequired) !== null && _props_isRequired !== void 0 ? _props_isRequired : state.isRequired,
+        validationBehavior: validationBehavior,
+        [(0, $k0DcK$reactstatelyform.privateValidationStateProp)]: {
+            realtimeValidation: combinedRealtimeValidation,
+            displayValidation: displayValidation,
+            resetValidation: state.resetValidation,
+            commitValidation: state.commitValidation,
+            updateValidation (v) {
+                nativeValidation.current = v;
+                updateValidation();
+            }
+        }
     }, toggleState, inputRef);
     return {
         ...res,
@@ -145,8 +205,8 @@ function $07e03121d6ac83c8$export$353b32fc6898d37d(props, state, inputRef) {
             ...res.inputProps,
             "aria-describedby": [
                 props["aria-describedby"],
-                state.isInvalid ? (0, $64fc3370e682155f$export$d5679492e2864181).get(state) : null,
-                (0, $64fc3370e682155f$export$a3077e9c93f7360f).get(state)
+                state.isInvalid ? errorMessageId : null,
+                descriptionId
             ].filter(Boolean).join(" ") || undefined
         }
     };

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;ACAA;;;;;;;;;;CAUC;;AA8BM,SAAS,0CAAY,KAAwB,EAAE,KAAkB,EAAE,QAAqC;IAC7G,IAAI,cAAC,UAAU,cAAE,UAAU,aAAE,SAAS,cAAE,UAAU,cAAE,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gCAAQ,EAAE,OAAO,OAAO;IAErG,IAAI,mBAAC,eAAe,EAAC,GAAG;IACxB,CAAA,GAAA,sBAAQ,EAAE;QACR,qEAAqE;QACrE,mDAAmD;QACnD,IAAI,SAAS,SACX,SAAS,QAAQ,gBAAgB;IAErC;IAEA,OAAO;QACL,YAAY;YACV,GAAG,UAAU;YACb,SAAS;QACX;oBACA;mBACA;oBACA;oBACA;mBACA;IACF;AACF;;CDrDC;AEVD;;;;;;;;;;ACAA;;;;;;;;;;CAUC,GAIM,MAAM,4CAAqB,IAAI;AAC/B,MAAM,4CAA8B,IAAI;AACxC,MAAM,4CAA+B,IAAI;;CDN/C;;;AA0BM,SAAS,0CAAiB,KAA6B,EAAE,KAAyB;IACvF,IAAI,cAAC,UAAU,QAAE,IAAI,EAAC,GAAG;IAEzB,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,8BAAO,EAAE;QAC3E,GAAG,KAAK;QACR,oDAAoD;QACpD,6CAA6C;QAC7C,kBAAkB;IACpB;IACA,CAAA,GAAA,yCAA0B,EAAE,IAAI,OAAO,iBAAiB;IACxD,CAAA,GAAA,yCAA2B,EAAE,IAAI,OAAO,kBAAkB;IAE1D,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAErD,oEAAoE;IACpE,CAAA,GAAA,yCAAiB,EAAE,IAAI,OAAO;IAE9B,OAAO;QACL,YAAY,CAAA,GAAA,gCAAS,EAAE,UAAU;YAC/B,MAAM;YACN,iBAAiB,cAAc;YAC/B,GAAG,UAAU;QACf;oBACA;0BACA;2BACA;IACF;AACF;;;AE/DA;;;;;;;;;;CAUC;;;AAgBM,SAAS,0CAAqB,KAAiC,EAAE,KAAyB,EAAE,QAAqC;IACtI,MAAM,cAAc,CAAA,GAAA,wCAAa,EAAE;QACjC,YAAY,MAAM,cAAc,MAAM;QACtC,YAAY,MAAM,WAAW,MAAM;QACnC,UAAS,UAAU;YACjB,IAAI,YACF,MAAM,SAAS,MAAM;iBAErB,MAAM,YAAY,MAAM;YAG1B,IAAI,MAAM,UACR,MAAM,SAAS;QAEnB;IACF;IAEA,IAAI,MAAM,CAAA,GAAA,yCAAU,EAAE;QACpB,GAAG,KAAK;QACR,YAAY,MAAM,cAAc,MAAM;QACtC,YAAY,MAAM,cAAc,MAAM;QACtC,MAAM,MAAM,QAAQ,CAAA,GAAA,yCAAiB,EAAE,IAAI;IAC7C,GAAG,aAAa;IAEhB,OAAO;QACL,GAAG,GAAG;QACN,YAAY;YACV,GAAG,IAAI,UAAU;YACjB,oBAAoB;gBAClB,KAAK,CAAC,mBAAmB;gBACzB,MAAM,YAAY,CAAA,GAAA,yCAA2B,EAAE,IAAI,SAAS;gBAC5D,CAAA,GAAA,yCAA0B,EAAE,IAAI;aACjC,CAAC,OAAO,SAAS,KAAK,QAAQ;QACjC;IACF;AACF;;","sources":["packages/@react-aria/checkbox/src/index.ts","packages/@react-aria/checkbox/src/useCheckbox.ts","packages/@react-aria/checkbox/src/useCheckboxGroup.ts","packages/@react-aria/checkbox/src/utils.ts","packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport type {CheckboxAria} from './useCheckbox';\nexport {useCheckbox} from './useCheckbox';\nexport {useCheckboxGroup} from './useCheckboxGroup';\nexport {useCheckboxGroupItem} from './useCheckboxGroupItem';\nexport type {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox';\nexport type {CheckboxGroupAria} from './useCheckboxGroup';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCheckboxProps} from '@react-types/checkbox';\nimport {InputHTMLAttributes, RefObject, useEffect} from 'react';\nimport {ToggleState} from '@react-stately/toggle';\nimport {useToggle} from '@react-aria/toggle';\n\nexport interface CheckboxAria {\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Whether the checkbox is selected. */\n  isSelected: boolean,\n  /** Whether the checkbox is in a pressed state. */\n  isPressed: boolean,\n  /** Whether the checkbox is disabled. */\n  isDisabled: boolean,\n  /** Whether the checkbox is read only. */\n  isReadOnly: boolean,\n  /** Whether the checkbox is invalid. */\n  isInvalid: boolean\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox component.\n * Checkboxes allow users to select multiple items from a list of individual items, or\n * to mark one individual item as selected.\n * @param props - Props for the checkbox.\n * @param state - State for the checkbox, as returned by `useToggleState`.\n * @param inputRef - A ref for the HTML input element.\n */\nexport function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {\n  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid} = useToggle(props, state, inputRef);\n\n  let {isIndeterminate} = props;\n  useEffect(() => {\n    // indeterminate is a property, but it can only be set via javascript\n    // https://css-tricks.com/indeterminate-checkboxes/\n    if (inputRef.current) {\n      inputRef.current.indeterminate = isIndeterminate;\n    }\n  });\n\n  return {\n    inputProps: {\n      ...inputProps,\n      checked: isSelected\n    },\n    isSelected,\n    isPressed,\n    isDisabled,\n    isReadOnly,\n    isInvalid\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCheckboxGroupProps} from '@react-types/checkbox';\nimport {checkboxGroupDescriptionIds, checkboxGroupErrorMessageIds, checkboxGroupNames} from './utils';\nimport {CheckboxGroupState} from '@react-stately/checkbox';\nimport {DOMAttributes} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {useField} from '@react-aria/label';\n\nexport interface CheckboxGroupAria {\n  /** Props for the checkbox group wrapper element. */\n  groupProps: DOMAttributes,\n  /** Props for the checkbox group's visible label (if any). */\n  labelProps: DOMAttributes,\n  /** Props for the checkbox group description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the checkbox group error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox group component.\n * Checkbox groups allow users to select multiple items from a list of options.\n * @param props - Props for the checkbox group.\n * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.\n */\nexport function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxGroupState): CheckboxGroupAria {\n  let {isDisabled, name} = props;\n\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    // Checkbox group is not an HTML input element so it\n    // shouldn't be labeled by a <label> element.\n    labelElementType: 'span'\n  });\n  checkboxGroupDescriptionIds.set(state, descriptionProps.id);\n  checkboxGroupErrorMessageIds.set(state, errorMessageProps.id);\n\n  let domProps = filterDOMProps(props, {labelable: true});\n\n  // Pass name prop from group to all items by attaching to the state.\n  checkboxGroupNames.set(state, name);\n\n  return {\n    groupProps: mergeProps(domProps, {\n      role: 'group',\n      'aria-disabled': isDisabled || undefined,\n      ...fieldProps\n    }),\n    labelProps,\n    descriptionProps,\n    errorMessageProps\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {CheckboxGroupState} from '@react-stately/checkbox';\n\nexport const checkboxGroupNames = new WeakMap<CheckboxGroupState, string>();\nexport const checkboxGroupDescriptionIds = new WeakMap<CheckboxGroupState, string>();\nexport const checkboxGroupErrorMessageIds = new WeakMap<CheckboxGroupState, string>();\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCheckboxGroupItemProps} from '@react-types/checkbox';\nimport {CheckboxAria, useCheckbox} from './useCheckbox';\nimport {checkboxGroupDescriptionIds, checkboxGroupErrorMessageIds, checkboxGroupNames} from './utils';\nimport {CheckboxGroupState} from '@react-stately/checkbox';\nimport {RefObject} from 'react';\nimport {useToggleState} from '@react-stately/toggle';\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox component contained within a checkbox group.\n * Checkbox groups allow users to select multiple items from a list of options.\n * @param props - Props for the checkbox.\n * @param state - State for the checkbox, as returned by `useCheckboxGroupState`.\n * @param inputRef - A ref for the HTML input element.\n */\nexport function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: CheckboxGroupState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {\n  const toggleState = useToggleState({\n    isReadOnly: props.isReadOnly || state.isReadOnly,\n    isSelected: state.isSelected(props.value),\n    onChange(isSelected) {\n      if (isSelected) {\n        state.addValue(props.value);\n      } else {\n        state.removeValue(props.value);\n      }\n\n      if (props.onChange) {\n        props.onChange(isSelected);\n      }\n    }\n  });\n\n  let res = useCheckbox({\n    ...props,\n    isReadOnly: props.isReadOnly || state.isReadOnly,\n    isDisabled: props.isDisabled || state.isDisabled,\n    name: props.name || checkboxGroupNames.get(state)\n  }, toggleState, inputRef);\n\n  return {\n    ...res,\n    inputProps: {\n      ...res.inputProps,\n      'aria-describedby': [\n        props['aria-describedby'],\n        state.isInvalid ? checkboxGroupErrorMessageIds.get(state) : null,\n        checkboxGroupDescriptionIds.get(state)\n      ].filter(Boolean).join(' ') || undefined\n    }\n  };\n}\n"],"names":[],"version":3,"file":"main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/checkbox/src/index.ts","packages/@react-aria/checkbox/src/useCheckbox.ts","packages/@react-aria/checkbox/src/useCheckboxGroup.ts","packages/@react-aria/checkbox/src/utils.ts","packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport type {CheckboxAria} from './useCheckbox';\nexport {useCheckbox} from './useCheckbox';\nexport {useCheckboxGroup} from './useCheckboxGroup';\nexport {useCheckboxGroupItem} from './useCheckboxGroupItem';\nexport type {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox';\nexport type {CheckboxGroupAria} from './useCheckboxGroup';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCheckboxProps} from '@react-types/checkbox';\nimport {InputHTMLAttributes, RefObject, useEffect} from 'react';\nimport {ToggleState} from '@react-stately/toggle';\nimport {useFormValidation} from '@react-aria/form';\nimport {useFormValidationState} from '@react-stately/form';\nimport {useToggle} from '@react-aria/toggle';\nimport {ValidationResult} from '@react-types/shared';\n\nexport interface CheckboxAria extends ValidationResult {\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Whether the checkbox is selected. */\n  isSelected: boolean,\n  /** Whether the checkbox is in a pressed state. */\n  isPressed: boolean,\n  /** Whether the checkbox is disabled. */\n  isDisabled: boolean,\n  /** Whether the checkbox is read only. */\n  isReadOnly: boolean\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox component.\n * Checkboxes allow users to select multiple items from a list of individual items, or\n * to mark one individual item as selected.\n * @param props - Props for the checkbox.\n * @param state - State for the checkbox, as returned by `useToggleState`.\n * @param inputRef - A ref for the HTML input element.\n */\nexport function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {\n  // Create validation state here because it doesn't make sense to add to general useToggleState.\n  let validationState = useFormValidationState({...props, value: state.isSelected});\n  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;\n  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly} = useToggle({\n    ...props,\n    isInvalid\n  }, state, inputRef);\n\n  useFormValidation(props, validationState, inputRef);\n\n  let {isIndeterminate, isRequired, validationBehavior = 'aria'} = props;\n  useEffect(() => {\n    // indeterminate is a property, but it can only be set via javascript\n    // https://css-tricks.com/indeterminate-checkboxes/\n    if (inputRef.current) {\n      inputRef.current.indeterminate = isIndeterminate;\n    }\n  });\n\n  return {\n    inputProps: {\n      ...inputProps,\n      checked: isSelected,\n      'aria-required': (isRequired && validationBehavior === 'aria') || undefined,\n      required: isRequired && validationBehavior === 'native'\n    },\n    isSelected,\n    isPressed,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCheckboxGroupProps} from '@react-types/checkbox';\nimport {checkboxGroupData} from './utils';\nimport {CheckboxGroupState} from '@react-stately/checkbox';\nimport {DOMAttributes, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {useField} from '@react-aria/label';\n\nexport interface CheckboxGroupAria extends ValidationResult {\n  /** Props for the checkbox group wrapper element. */\n  groupProps: DOMAttributes,\n  /** Props for the checkbox group's visible label (if any). */\n  labelProps: DOMAttributes,\n  /** Props for the checkbox group description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the checkbox group error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox group component.\n * Checkbox groups allow users to select multiple items from a list of options.\n * @param props - Props for the checkbox group.\n * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.\n */\nexport function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxGroupState): CheckboxGroupAria {\n  let {isDisabled, name, validationBehavior = 'aria'} = props;\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    // Checkbox group is not an HTML input element so it\n    // shouldn't be labeled by a <label> element.\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n\n  checkboxGroupData.set(state, {\n    name,\n    descriptionId: descriptionProps.id,\n    errorMessageId: errorMessageProps.id,\n    validationBehavior\n  });\n\n  let domProps = filterDOMProps(props, {labelable: true});\n\n  return {\n    groupProps: mergeProps(domProps, {\n      role: 'group',\n      'aria-disabled': isDisabled || undefined,\n      ...fieldProps\n    }),\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {CheckboxGroupState} from '@react-stately/checkbox';\n\ninterface CheckboxGroupData {\n  name: string,\n  descriptionId: string,\n  errorMessageId: string,\n  validationBehavior: 'aria' | 'native'\n}\n\nexport const checkboxGroupData = new WeakMap<CheckboxGroupState, CheckboxGroupData>();\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCheckboxGroupItemProps} from '@react-types/checkbox';\nimport {CheckboxAria, useCheckbox} from './useCheckbox';\nimport {checkboxGroupData} from './utils';\nimport {CheckboxGroupState} from '@react-stately/checkbox';\nimport {DEFAULT_VALIDATION_RESULT, privateValidationStateProp, useFormValidationState} from '@react-stately/form';\nimport {RefObject, useEffect, useRef} from 'react';\nimport {useToggleState} from '@react-stately/toggle';\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox component contained within a checkbox group.\n * Checkbox groups allow users to select multiple items from a list of options.\n * @param props - Props for the checkbox.\n * @param state - State for the checkbox, as returned by `useCheckboxGroupState`.\n * @param inputRef - A ref for the HTML input element.\n */\nexport function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: CheckboxGroupState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {\n  const toggleState = useToggleState({\n    isReadOnly: props.isReadOnly || state.isReadOnly,\n    isSelected: state.isSelected(props.value),\n    onChange(isSelected) {\n      if (isSelected) {\n        state.addValue(props.value);\n      } else {\n        state.removeValue(props.value);\n      }\n\n      if (props.onChange) {\n        props.onChange(isSelected);\n      }\n    }\n  });\n\n  let {name, descriptionId, errorMessageId, validationBehavior} = checkboxGroupData.get(state)!;\n  validationBehavior = props.validationBehavior ?? validationBehavior;\n\n  // Local validation for this checkbox.\n  let {realtimeValidation} = useFormValidationState({\n    ...props,\n    value: toggleState.isSelected,\n    // Server validation is handled at the group level.\n    name: undefined,\n    validationBehavior: 'aria'\n  });\n\n  // Update the checkbox group state when realtime validation changes.\n  let nativeValidation = useRef(DEFAULT_VALIDATION_RESULT);\n  let updateValidation = () => {\n    state.setInvalid(props.value, realtimeValidation.isInvalid ? realtimeValidation : nativeValidation.current);\n  };\n\n  useEffect(updateValidation);\n\n  // Combine group and checkbox level validation.\n  let combinedRealtimeValidation = state.realtimeValidation.isInvalid ? state.realtimeValidation : realtimeValidation;\n  let displayValidation = validationBehavior === 'native' ? state.displayValidation : combinedRealtimeValidation;\n\n  let res = useCheckbox({\n    ...props,\n    isReadOnly: props.isReadOnly || state.isReadOnly,\n    isDisabled: props.isDisabled || state.isDisabled,\n    name: props.name || name,\n    isRequired: props.isRequired ?? state.isRequired,\n    validationBehavior,\n    [privateValidationStateProp]: {\n      realtimeValidation: combinedRealtimeValidation,\n      displayValidation,\n      resetValidation: state.resetValidation,\n      commitValidation: state.commitValidation,\n      updateValidation(v) {\n        nativeValidation.current = v;\n        updateValidation();\n      }\n    }\n  }, toggleState, inputRef);\n\n  return {\n    ...res,\n    inputProps: {\n      ...res.inputProps,\n      'aria-describedby': [\n        props['aria-describedby'],\n        state.isInvalid ? errorMessageId : null,\n        descriptionId\n      ].filter(Boolean).join(' ') || undefined\n    }\n  };\n}\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,4 +1,6 @@
-import {useEffect as $cKEhs$useEffect} from "react";
+import {useEffect as $cKEhs$useEffect, useRef as $cKEhs$useRef} from "react";
+import {useFormValidation as $cKEhs$useFormValidation} from "@react-aria/form";
+import {useFormValidationState as $cKEhs$useFormValidationState, DEFAULT_VALIDATION_RESULT as $cKEhs$DEFAULT_VALIDATION_RESULT, privateValidationStateProp as $cKEhs$privateValidationStateProp} from "@react-stately/form";
 import {useToggle as $cKEhs$useToggle} from "@react-aria/toggle";
 import {filterDOMProps as $cKEhs$filterDOMProps, mergeProps as $cKEhs$mergeProps} from "@react-aria/utils";
 import {useField as $cKEhs$useField} from "@react-aria/label";
@@ -26,9 +28,21 @@ import {useToggleState as $cKEhs$useToggleState} from "@react-stately/toggle";
  * governing permissions and limitations under the License.
  */ 
 
+
+
 function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
-    let { inputProps: inputProps, isSelected: isSelected, isPressed: isPressed, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: isInvalid } = (0, $cKEhs$useToggle)(props, state, inputRef);
-    let { isIndeterminate: isIndeterminate } = props;
+    // Create validation state here because it doesn't make sense to add to general useToggleState.
+    let validationState = (0, $cKEhs$useFormValidationState)({
+        ...props,
+        value: state.isSelected
+    });
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation;
+    let { inputProps: inputProps, isSelected: isSelected, isPressed: isPressed, isDisabled: isDisabled, isReadOnly: isReadOnly } = (0, $cKEhs$useToggle)({
+        ...props,
+        isInvalid: isInvalid
+    }, state, inputRef);
+    (0, $cKEhs$useFormValidation)(props, validationState, inputRef);
+    let { isIndeterminate: isIndeterminate, isRequired: isRequired, validationBehavior: validationBehavior = "aria" } = props;
     (0, $cKEhs$useEffect)(()=>{
         // indeterminate is a property, but it can only be set via javascript
         // https://css-tricks.com/indeterminate-checkboxes/
@@ -37,13 +51,17 @@ function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
     return {
         inputProps: {
             ...inputProps,
-            checked: isSelected
+            checked: isSelected,
+            "aria-required": isRequired && validationBehavior === "aria" || undefined,
+            required: isRequired && validationBehavior === "native"
         },
         isSelected: isSelected,
         isPressed: isPressed,
         isDisabled: isDisabled,
         isReadOnly: isReadOnly,
-        isInvalid: isInvalid
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
     };
 }
 
@@ -68,28 +86,31 @@ function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */ const $1ae600c947479353$export$31440636951aa68c = new WeakMap();
-const $1ae600c947479353$export$a3077e9c93f7360f = new WeakMap();
-const $1ae600c947479353$export$d5679492e2864181 = new WeakMap();
+ */ const $1ae600c947479353$export$ec98120685d4f57d = new WeakMap();
 
 
 
 
 function $1e9fce0cfacc738b$export$49ff6f28c54f1cbe(props, state) {
-    let { isDisabled: isDisabled, name: name } = props;
+    let { isDisabled: isDisabled, name: name, validationBehavior: validationBehavior = "aria" } = props;
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $cKEhs$useField)({
         ...props,
         // Checkbox group is not an HTML input element so it
         // shouldn't be labeled by a <label> element.
-        labelElementType: "span"
+        labelElementType: "span",
+        isInvalid: isInvalid,
+        errorMessage: props.errorMessage || validationErrors
+    });
+    (0, $1ae600c947479353$export$ec98120685d4f57d).set(state, {
+        name: name,
+        descriptionId: descriptionProps.id,
+        errorMessageId: errorMessageProps.id,
+        validationBehavior: validationBehavior
     });
-    (0, $1ae600c947479353$export$a3077e9c93f7360f).set(state, descriptionProps.id);
-    (0, $1ae600c947479353$export$d5679492e2864181).set(state, errorMessageProps.id);
     let domProps = (0, $cKEhs$filterDOMProps)(props, {
         labelable: true
     });
-    // Pass name prop from group to all items by attaching to the state.
-    (0, $1ae600c947479353$export$31440636951aa68c).set(state, name);
     return {
         groupProps: (0, $cKEhs$mergeProps)(domProps, {
             role: "group",
@@ -98,7 +119,10 @@ function $1e9fce0cfacc738b$export$49ff6f28c54f1cbe(props, state) {
         }),
         labelProps: labelProps,
         descriptionProps: descriptionProps,
-        errorMessageProps: errorMessageProps
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
     };
 }
 
@@ -116,6 +140,8 @@ function $1e9fce0cfacc738b$export$49ff6f28c54f1cbe(props, state) {
  */ 
 
 
+
+
 function $fba3e38d5ca8983f$export$353b32fc6898d37d(props, state, inputRef) {
     const toggleState = (0, $cKEhs$useToggleState)({
         isReadOnly: props.isReadOnly || state.isReadOnly,
@@ -126,11 +152,44 @@ function $fba3e38d5ca8983f$export$353b32fc6898d37d(props, state, inputRef) {
             if (props.onChange) props.onChange(isSelected);
         }
     });
+    let { name: name, descriptionId: descriptionId, errorMessageId: errorMessageId, validationBehavior: validationBehavior } = (0, $1ae600c947479353$export$ec98120685d4f57d).get(state);
+    var _props_validationBehavior;
+    validationBehavior = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : validationBehavior;
+    // Local validation for this checkbox.
+    let { realtimeValidation: realtimeValidation } = (0, $cKEhs$useFormValidationState)({
+        ...props,
+        value: toggleState.isSelected,
+        // Server validation is handled at the group level.
+        name: undefined,
+        validationBehavior: "aria"
+    });
+    // Update the checkbox group state when realtime validation changes.
+    let nativeValidation = (0, $cKEhs$useRef)((0, $cKEhs$DEFAULT_VALIDATION_RESULT));
+    let updateValidation = ()=>{
+        state.setInvalid(props.value, realtimeValidation.isInvalid ? realtimeValidation : nativeValidation.current);
+    };
+    (0, $cKEhs$useEffect)(updateValidation);
+    // Combine group and checkbox level validation.
+    let combinedRealtimeValidation = state.realtimeValidation.isInvalid ? state.realtimeValidation : realtimeValidation;
+    let displayValidation = validationBehavior === "native" ? state.displayValidation : combinedRealtimeValidation;
+    var _props_isRequired;
     let res = (0, $406796ff087fe49b$export$e375f10ce42261c5)({
         ...props,
         isReadOnly: props.isReadOnly || state.isReadOnly,
         isDisabled: props.isDisabled || state.isDisabled,
-        name: props.name || (0, $1ae600c947479353$export$31440636951aa68c).get(state)
+        name: props.name || name,
+        isRequired: (_props_isRequired = props.isRequired) !== null && _props_isRequired !== void 0 ? _props_isRequired : state.isRequired,
+        validationBehavior: validationBehavior,
+        [(0, $cKEhs$privateValidationStateProp)]: {
+            realtimeValidation: combinedRealtimeValidation,
+            displayValidation: displayValidation,
+            resetValidation: state.resetValidation,
+            commitValidation: state.commitValidation,
+            updateValidation (v) {
+                nativeValidation.current = v;
+                updateValidation();
+            }
+        }
     }, toggleState, inputRef);
     return {
         ...res,
@@ -138,8 +197,8 @@ function $fba3e38d5ca8983f$export$353b32fc6898d37d(props, state, inputRef) {
             ...res.inputProps,
             "aria-describedby": [
                 props["aria-describedby"],
-                state.isInvalid ? (0, $1ae600c947479353$export$d5679492e2864181).get(state) : null,
-                (0, $1ae600c947479353$export$a3077e9c93f7360f).get(state)
+                state.isInvalid ? errorMessageId : null,
+                descriptionId
             ].filter(Boolean).join(" ") || undefined
         }
     };

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;AAAA;;;;;;;;;;ACAA;;;;;;;;;;CAUC;;AA8BM,SAAS,0CAAY,KAAwB,EAAE,KAAkB,EAAE,QAAqC;IAC7G,IAAI,cAAC,UAAU,cAAE,UAAU,aAAE,SAAS,cAAE,UAAU,cAAE,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ,EAAE,OAAO,OAAO;IAErG,IAAI,mBAAC,eAAe,EAAC,GAAG;IACxB,CAAA,GAAA,gBAAQ,EAAE;QACR,qEAAqE;QACrE,mDAAmD;QACnD,IAAI,SAAS,SACX,SAAS,QAAQ,gBAAgB;IAErC;IAEA,OAAO;QACL,YAAY;YACV,GAAG,UAAU;YACb,SAAS;QACX;oBACA;mBACA;oBACA;oBACA;mBACA;IACF;AACF;;CDrDC;AEVD;;;;;;;;;;ACAA;;;;;;;;;;CAUC,GAIM,MAAM,4CAAqB,IAAI;AAC/B,MAAM,4CAA8B,IAAI;AACxC,MAAM,4CAA+B,IAAI;;CDN/C;;;AA0BM,SAAS,0CAAiB,KAA6B,EAAE,KAAyB;IACvF,IAAI,cAAC,UAAU,QAAE,IAAI,EAAC,GAAG;IAEzB,IAAI,cAAC,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QAC3E,GAAG,KAAK;QACR,oDAAoD;QACpD,6CAA6C;QAC7C,kBAAkB;IACpB;IACA,CAAA,GAAA,yCAA0B,EAAE,IAAI,OAAO,iBAAiB;IACxD,CAAA,GAAA,yCAA2B,EAAE,IAAI,OAAO,kBAAkB;IAE1D,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAErD,oEAAoE;IACpE,CAAA,GAAA,yCAAiB,EAAE,IAAI,OAAO;IAE9B,OAAO;QACL,YAAY,CAAA,GAAA,iBAAS,EAAE,UAAU;YAC/B,MAAM;YACN,iBAAiB,cAAc;YAC/B,GAAG,UAAU;QACf;oBACA;0BACA;2BACA;IACF;AACF;;;AE/DA;;;;;;;;;;CAUC;;;AAgBM,SAAS,0CAAqB,KAAiC,EAAE,KAAyB,EAAE,QAAqC;IACtI,MAAM,cAAc,CAAA,GAAA,qBAAa,EAAE;QACjC,YAAY,MAAM,cAAc,MAAM;QACtC,YAAY,MAAM,WAAW,MAAM;QACnC,UAAS,UAAU;YACjB,IAAI,YACF,MAAM,SAAS,MAAM;iBAErB,MAAM,YAAY,MAAM;YAG1B,IAAI,MAAM,UACR,MAAM,SAAS;QAEnB;IACF;IAEA,IAAI,MAAM,CAAA,GAAA,yCAAU,EAAE;QACpB,GAAG,KAAK;QACR,YAAY,MAAM,cAAc,MAAM;QACtC,YAAY,MAAM,cAAc,MAAM;QACtC,MAAM,MAAM,QAAQ,CAAA,GAAA,yCAAiB,EAAE,IAAI;IAC7C,GAAG,aAAa;IAEhB,OAAO;QACL,GAAG,GAAG;QACN,YAAY;YACV,GAAG,IAAI,UAAU;YACjB,oBAAoB;gBAClB,KAAK,CAAC,mBAAmB;gBACzB,MAAM,YAAY,CAAA,GAAA,yCAA2B,EAAE,IAAI,SAAS;gBAC5D,CAAA,GAAA,yCAA0B,EAAE,IAAI;aACjC,CAAC,OAAO,SAAS,KAAK,QAAQ;QACjC;IACF;AACF;;","sources":["packages/@react-aria/checkbox/src/index.ts","packages/@react-aria/checkbox/src/useCheckbox.ts","packages/@react-aria/checkbox/src/useCheckboxGroup.ts","packages/@react-aria/checkbox/src/utils.ts","packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport type {CheckboxAria} from './useCheckbox';\nexport {useCheckbox} from './useCheckbox';\nexport {useCheckboxGroup} from './useCheckboxGroup';\nexport {useCheckboxGroupItem} from './useCheckboxGroupItem';\nexport type {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox';\nexport type {CheckboxGroupAria} from './useCheckboxGroup';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCheckboxProps} from '@react-types/checkbox';\nimport {InputHTMLAttributes, RefObject, useEffect} from 'react';\nimport {ToggleState} from '@react-stately/toggle';\nimport {useToggle} from '@react-aria/toggle';\n\nexport interface CheckboxAria {\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Whether the checkbox is selected. */\n  isSelected: boolean,\n  /** Whether the checkbox is in a pressed state. */\n  isPressed: boolean,\n  /** Whether the checkbox is disabled. */\n  isDisabled: boolean,\n  /** Whether the checkbox is read only. */\n  isReadOnly: boolean,\n  /** Whether the checkbox is invalid. */\n  isInvalid: boolean\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox component.\n * Checkboxes allow users to select multiple items from a list of individual items, or\n * to mark one individual item as selected.\n * @param props - Props for the checkbox.\n * @param state - State for the checkbox, as returned by `useToggleState`.\n * @param inputRef - A ref for the HTML input element.\n */\nexport function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {\n  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid} = useToggle(props, state, inputRef);\n\n  let {isIndeterminate} = props;\n  useEffect(() => {\n    // indeterminate is a property, but it can only be set via javascript\n    // https://css-tricks.com/indeterminate-checkboxes/\n    if (inputRef.current) {\n      inputRef.current.indeterminate = isIndeterminate;\n    }\n  });\n\n  return {\n    inputProps: {\n      ...inputProps,\n      checked: isSelected\n    },\n    isSelected,\n    isPressed,\n    isDisabled,\n    isReadOnly,\n    isInvalid\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCheckboxGroupProps} from '@react-types/checkbox';\nimport {checkboxGroupDescriptionIds, checkboxGroupErrorMessageIds, checkboxGroupNames} from './utils';\nimport {CheckboxGroupState} from '@react-stately/checkbox';\nimport {DOMAttributes} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {useField} from '@react-aria/label';\n\nexport interface CheckboxGroupAria {\n  /** Props for the checkbox group wrapper element. */\n  groupProps: DOMAttributes,\n  /** Props for the checkbox group's visible label (if any). */\n  labelProps: DOMAttributes,\n  /** Props for the checkbox group description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the checkbox group error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox group component.\n * Checkbox groups allow users to select multiple items from a list of options.\n * @param props - Props for the checkbox group.\n * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.\n */\nexport function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxGroupState): CheckboxGroupAria {\n  let {isDisabled, name} = props;\n\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    // Checkbox group is not an HTML input element so it\n    // shouldn't be labeled by a <label> element.\n    labelElementType: 'span'\n  });\n  checkboxGroupDescriptionIds.set(state, descriptionProps.id);\n  checkboxGroupErrorMessageIds.set(state, errorMessageProps.id);\n\n  let domProps = filterDOMProps(props, {labelable: true});\n\n  // Pass name prop from group to all items by attaching to the state.\n  checkboxGroupNames.set(state, name);\n\n  return {\n    groupProps: mergeProps(domProps, {\n      role: 'group',\n      'aria-disabled': isDisabled || undefined,\n      ...fieldProps\n    }),\n    labelProps,\n    descriptionProps,\n    errorMessageProps\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {CheckboxGroupState} from '@react-stately/checkbox';\n\nexport const checkboxGroupNames = new WeakMap<CheckboxGroupState, string>();\nexport const checkboxGroupDescriptionIds = new WeakMap<CheckboxGroupState, string>();\nexport const checkboxGroupErrorMessageIds = new WeakMap<CheckboxGroupState, string>();\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCheckboxGroupItemProps} from '@react-types/checkbox';\nimport {CheckboxAria, useCheckbox} from './useCheckbox';\nimport {checkboxGroupDescriptionIds, checkboxGroupErrorMessageIds, checkboxGroupNames} from './utils';\nimport {CheckboxGroupState} from '@react-stately/checkbox';\nimport {RefObject} from 'react';\nimport {useToggleState} from '@react-stately/toggle';\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox component contained within a checkbox group.\n * Checkbox groups allow users to select multiple items from a list of options.\n * @param props - Props for the checkbox.\n * @param state - State for the checkbox, as returned by `useCheckboxGroupState`.\n * @param inputRef - A ref for the HTML input element.\n */\nexport function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: CheckboxGroupState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {\n  const toggleState = useToggleState({\n    isReadOnly: props.isReadOnly || state.isReadOnly,\n    isSelected: state.isSelected(props.value),\n    onChange(isSelected) {\n      if (isSelected) {\n        state.addValue(props.value);\n      } else {\n        state.removeValue(props.value);\n      }\n\n      if (props.onChange) {\n        props.onChange(isSelected);\n      }\n    }\n  });\n\n  let res = useCheckbox({\n    ...props,\n    isReadOnly: props.isReadOnly || state.isReadOnly,\n    isDisabled: props.isDisabled || state.isDisabled,\n    name: props.name || checkboxGroupNames.get(state)\n  }, toggleState, inputRef);\n\n  return {\n    ...res,\n    inputProps: {\n      ...res.inputProps,\n      'aria-describedby': [\n        props['aria-describedby'],\n        state.isInvalid ? checkboxGroupErrorMessageIds.get(state) : null,\n        checkboxGroupDescriptionIds.get(state)\n      ].filter(Boolean).join(' ') || undefined\n    }\n  };\n}\n"],"names":[],"version":3,"file":"module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/checkbox/src/index.ts","packages/@react-aria/checkbox/src/useCheckbox.ts","packages/@react-aria/checkbox/src/useCheckboxGroup.ts","packages/@react-aria/checkbox/src/utils.ts","packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport type {CheckboxAria} from './useCheckbox';\nexport {useCheckbox} from './useCheckbox';\nexport {useCheckboxGroup} from './useCheckboxGroup';\nexport {useCheckboxGroupItem} from './useCheckboxGroupItem';\nexport type {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox';\nexport type {CheckboxGroupAria} from './useCheckboxGroup';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCheckboxProps} from '@react-types/checkbox';\nimport {InputHTMLAttributes, RefObject, useEffect} from 'react';\nimport {ToggleState} from '@react-stately/toggle';\nimport {useFormValidation} from '@react-aria/form';\nimport {useFormValidationState} from '@react-stately/form';\nimport {useToggle} from '@react-aria/toggle';\nimport {ValidationResult} from '@react-types/shared';\n\nexport interface CheckboxAria extends ValidationResult {\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Whether the checkbox is selected. */\n  isSelected: boolean,\n  /** Whether the checkbox is in a pressed state. */\n  isPressed: boolean,\n  /** Whether the checkbox is disabled. */\n  isDisabled: boolean,\n  /** Whether the checkbox is read only. */\n  isReadOnly: boolean\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox component.\n * Checkboxes allow users to select multiple items from a list of individual items, or\n * to mark one individual item as selected.\n * @param props - Props for the checkbox.\n * @param state - State for the checkbox, as returned by `useToggleState`.\n * @param inputRef - A ref for the HTML input element.\n */\nexport function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {\n  // Create validation state here because it doesn't make sense to add to general useToggleState.\n  let validationState = useFormValidationState({...props, value: state.isSelected});\n  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;\n  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly} = useToggle({\n    ...props,\n    isInvalid\n  }, state, inputRef);\n\n  useFormValidation(props, validationState, inputRef);\n\n  let {isIndeterminate, isRequired, validationBehavior = 'aria'} = props;\n  useEffect(() => {\n    // indeterminate is a property, but it can only be set via javascript\n    // https://css-tricks.com/indeterminate-checkboxes/\n    if (inputRef.current) {\n      inputRef.current.indeterminate = isIndeterminate;\n    }\n  });\n\n  return {\n    inputProps: {\n      ...inputProps,\n      checked: isSelected,\n      'aria-required': (isRequired && validationBehavior === 'aria') || undefined,\n      required: isRequired && validationBehavior === 'native'\n    },\n    isSelected,\n    isPressed,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCheckboxGroupProps} from '@react-types/checkbox';\nimport {checkboxGroupData} from './utils';\nimport {CheckboxGroupState} from '@react-stately/checkbox';\nimport {DOMAttributes, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport {useField} from '@react-aria/label';\n\nexport interface CheckboxGroupAria extends ValidationResult {\n  /** Props for the checkbox group wrapper element. */\n  groupProps: DOMAttributes,\n  /** Props for the checkbox group's visible label (if any). */\n  labelProps: DOMAttributes,\n  /** Props for the checkbox group description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the checkbox group error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox group component.\n * Checkbox groups allow users to select multiple items from a list of options.\n * @param props - Props for the checkbox group.\n * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.\n */\nexport function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxGroupState): CheckboxGroupAria {\n  let {isDisabled, name, validationBehavior = 'aria'} = props;\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    // Checkbox group is not an HTML input element so it\n    // shouldn't be labeled by a <label> element.\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n\n  checkboxGroupData.set(state, {\n    name,\n    descriptionId: descriptionProps.id,\n    errorMessageId: errorMessageProps.id,\n    validationBehavior\n  });\n\n  let domProps = filterDOMProps(props, {labelable: true});\n\n  return {\n    groupProps: mergeProps(domProps, {\n      role: 'group',\n      'aria-disabled': isDisabled || undefined,\n      ...fieldProps\n    }),\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {CheckboxGroupState} from '@react-stately/checkbox';\n\ninterface CheckboxGroupData {\n  name: string,\n  descriptionId: string,\n  errorMessageId: string,\n  validationBehavior: 'aria' | 'native'\n}\n\nexport const checkboxGroupData = new WeakMap<CheckboxGroupState, CheckboxGroupData>();\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCheckboxGroupItemProps} from '@react-types/checkbox';\nimport {CheckboxAria, useCheckbox} from './useCheckbox';\nimport {checkboxGroupData} from './utils';\nimport {CheckboxGroupState} from '@react-stately/checkbox';\nimport {DEFAULT_VALIDATION_RESULT, privateValidationStateProp, useFormValidationState} from '@react-stately/form';\nimport {RefObject, useEffect, useRef} from 'react';\nimport {useToggleState} from '@react-stately/toggle';\n\n/**\n * Provides the behavior and accessibility implementation for a checkbox component contained within a checkbox group.\n * Checkbox groups allow users to select multiple items from a list of options.\n * @param props - Props for the checkbox.\n * @param state - State for the checkbox, as returned by `useCheckboxGroupState`.\n * @param inputRef - A ref for the HTML input element.\n */\nexport function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: CheckboxGroupState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {\n  const toggleState = useToggleState({\n    isReadOnly: props.isReadOnly || state.isReadOnly,\n    isSelected: state.isSelected(props.value),\n    onChange(isSelected) {\n      if (isSelected) {\n        state.addValue(props.value);\n      } else {\n        state.removeValue(props.value);\n      }\n\n      if (props.onChange) {\n        props.onChange(isSelected);\n      }\n    }\n  });\n\n  let {name, descriptionId, errorMessageId, validationBehavior} = checkboxGroupData.get(state)!;\n  validationBehavior = props.validationBehavior ?? validationBehavior;\n\n  // Local validation for this checkbox.\n  let {realtimeValidation} = useFormValidationState({\n    ...props,\n    value: toggleState.isSelected,\n    // Server validation is handled at the group level.\n    name: undefined,\n    validationBehavior: 'aria'\n  });\n\n  // Update the checkbox group state when realtime validation changes.\n  let nativeValidation = useRef(DEFAULT_VALIDATION_RESULT);\n  let updateValidation = () => {\n    state.setInvalid(props.value, realtimeValidation.isInvalid ? realtimeValidation : nativeValidation.current);\n  };\n\n  useEffect(updateValidation);\n\n  // Combine group and checkbox level validation.\n  let combinedRealtimeValidation = state.realtimeValidation.isInvalid ? state.realtimeValidation : realtimeValidation;\n  let displayValidation = validationBehavior === 'native' ? state.displayValidation : combinedRealtimeValidation;\n\n  let res = useCheckbox({\n    ...props,\n    isReadOnly: props.isReadOnly || state.isReadOnly,\n    isDisabled: props.isDisabled || state.isDisabled,\n    name: props.name || name,\n    isRequired: props.isRequired ?? state.isRequired,\n    validationBehavior,\n    [privateValidationStateProp]: {\n      realtimeValidation: combinedRealtimeValidation,\n      displayValidation,\n      resetValidation: state.resetValidation,\n      commitValidation: state.commitValidation,\n      updateValidation(v) {\n        nativeValidation.current = v;\n        updateValidation();\n      }\n    }\n  }, toggleState, inputRef);\n\n  return {\n    ...res,\n    inputProps: {\n      ...res.inputProps,\n      'aria-describedby': [\n        props['aria-describedby'],\n        state.isInvalid ? errorMessageId : null,\n        descriptionId\n      ].filter(Boolean).join(' ') || undefined\n    }\n  };\n}\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -1,9 +1,9 @@
 import { AriaCheckboxProps, AriaCheckboxGroupProps, AriaCheckboxGroupItemProps } from "@react-types/checkbox";
 import { InputHTMLAttributes, RefObject } from "react";
 import { ToggleState } from "@react-stately/toggle";
+import { ValidationResult, DOMAttributes } from "@react-types/shared";
 import { CheckboxGroupState } from "@react-stately/checkbox";
-import { DOMAttributes } from "@react-types/shared";
-export interface CheckboxAria {
+export interface CheckboxAria extends ValidationResult {
     /** Props for the input element. */
     inputProps: InputHTMLAttributes<HTMLInputElement>;
     /** Whether the checkbox is selected. */
@@ -14,8 +14,6 @@ export interface CheckboxAria {
     isDisabled: boolean;
     /** Whether the checkbox is read only. */
     isReadOnly: boolean;
-    /** Whether the checkbox is invalid. */
-    isInvalid: boolean;
 }
 /**
  * Provides the behavior and accessibility implementation for a checkbox component.
@@ -26,7 +24,7 @@ export interface CheckboxAria {
  * @param inputRef - A ref for the HTML input element.
  */
 export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputRef: RefObject<HTMLInputElement>): CheckboxAria;
-export interface CheckboxGroupAria {
+export interface CheckboxGroupAria extends ValidationResult {
     /** Props for the checkbox group wrapper element. */
     groupProps: DOMAttributes;
     /** Props for the checkbox group's visible label (if any). */

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;;AAiBA;IACE,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,wCAAwC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,UAAU,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;GAOG;AACH,4BAA4B,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,gBAAgB,CAAC,GAAG,YAAY,CAuB7H;AE5CD;IACE,oDAAoD;IACpD,UAAU,EAAE,aAAa,CAAC;IAC1B,6DAA6D;IAC7D,UAAU,EAAE,aAAa,CAAC;IAC1B,gEAAgE;IAChE,gBAAgB,EAAE,aAAa,CAAC;IAChC,kEAAkE;IAClE,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;;;GAKG;AACH,iCAAiC,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,kBAAkB,GAAG,iBAAiB,CA2B5G;AC5CD;;;;;;GAMG;AACH,qCAAqC,KAAK,EAAE,0BAA0B,EAAE,KAAK,EAAE,kBAAkB,EAAE,QAAQ,EAAE,UAAU,gBAAgB,CAAC,GAAG,YAAY,CAmCtJ;AC9CD,YAAY,EAAC,0BAA0B,EAAE,sBAAsB,EAAE,iBAAiB,EAAC,MAAM,uBAAuB,CAAC","sources":["packages/@react-aria/checkbox/src/packages/@react-aria/checkbox/src/useCheckbox.ts","packages/@react-aria/checkbox/src/packages/@react-aria/checkbox/src/utils.ts","packages/@react-aria/checkbox/src/packages/@react-aria/checkbox/src/useCheckboxGroup.ts","packages/@react-aria/checkbox/src/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts","packages/@react-aria/checkbox/src/packages/@react-aria/checkbox/src/index.ts","packages/@react-aria/checkbox/src/index.ts"],"sourcesContent":[null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport type {CheckboxAria} from './useCheckbox';\nexport {useCheckbox} from './useCheckbox';\nexport {useCheckboxGroup} from './useCheckboxGroup';\nexport {useCheckboxGroupItem} from './useCheckboxGroupItem';\nexport type {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox';\nexport type {CheckboxGroupAria} from './useCheckboxGroup';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;;;AAoBA,6BAA8B,SAAQ,gBAAgB;IACpD,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,wCAAwC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,UAAU,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;GAOG;AACH,4BAA4B,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,gBAAgB,CAAC,GAAG,YAAY,CAmC7H;AEzDD,kCAAmC,SAAQ,gBAAgB;IACzD,oDAAoD;IACpD,UAAU,EAAE,aAAa,CAAC;IAC1B,6DAA6D;IAC7D,UAAU,EAAE,aAAa,CAAC;IAC1B,gEAAgE;IAChE,gBAAgB,EAAE,aAAa,CAAC;IAChC,kEAAkE;IAClE,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;;;GAKG;AACH,iCAAiC,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,kBAAkB,GAAG,iBAAiB,CAmC5G;ACnDD;;;;;;GAMG;AACH,qCAAqC,KAAK,EAAE,0BAA0B,EAAE,KAAK,EAAE,kBAAkB,EAAE,QAAQ,EAAE,UAAU,gBAAgB,CAAC,GAAG,YAAY,CAuEtJ;ACnFD,YAAY,EAAC,0BAA0B,EAAE,sBAAsB,EAAE,iBAAiB,EAAC,MAAM,uBAAuB,CAAC","sources":["packages/@react-aria/checkbox/src/packages/@react-aria/checkbox/src/useCheckbox.ts","packages/@react-aria/checkbox/src/packages/@react-aria/checkbox/src/utils.ts","packages/@react-aria/checkbox/src/packages/@react-aria/checkbox/src/useCheckboxGroup.ts","packages/@react-aria/checkbox/src/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts","packages/@react-aria/checkbox/src/packages/@react-aria/checkbox/src/index.ts","packages/@react-aria/checkbox/src/index.ts"],"sourcesContent":[null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport type {CheckboxAria} from './useCheckbox';\nexport {useCheckbox} from './useCheckbox';\nexport {useCheckboxGroup} from './useCheckboxGroup';\nexport {useCheckboxGroupItem} from './useCheckboxGroupItem';\nexport type {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps, AriaCheckboxProps} from '@react-types/checkbox';\nexport type {CheckboxGroupAria} from './useCheckboxGroup';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/checkbox",
-  "version": "3.11.2",
+  "version": "3.12.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,13 +22,15 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/label": "^3.7.2",
-    "@react-aria/toggle": "^3.8.2",
-    "@react-aria/utils": "^3.21.1",
-    "@react-stately/checkbox": "^3.5.1",
-    "@react-stately/toggle": "^3.6.3",
-    "@react-types/checkbox": "^3.5.2",
-    "@react-types/shared": "^3.21.0",
+    "@react-aria/form": "^3.0.0",
+    "@react-aria/label": "^3.7.3",
+    "@react-aria/toggle": "^3.9.0",
+    "@react-aria/utils": "^3.22.0",
+    "@react-stately/checkbox": "^3.6.0",
+    "@react-stately/form": "^3.0.0",
+    "@react-stately/toggle": "^3.7.0",
+    "@react-types/checkbox": "^3.6.0",
+    "@react-types/shared": "^3.22.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -37,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3ecf62dcceea437cb12df1851636dd491bb6591c"
+  "gitHead": "9ce2f674eab2cc8912800d3162dcf00a1ce94274"
 }

package/src/useCheckbox.ts

@@ -13,9 +13,12 @@
 import {AriaCheckboxProps} from '@react-types/checkbox';
 import {InputHTMLAttributes, RefObject, useEffect} from 'react';
 import {ToggleState} from '@react-stately/toggle';
+import {useFormValidation} from '@react-aria/form';
+import {useFormValidationState} from '@react-stately/form';
 import {useToggle} from '@react-aria/toggle';
+import {ValidationResult} from '@react-types/shared';
 
-export interface CheckboxAria {
+export interface CheckboxAria extends ValidationResult {
   /** Props for the input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Whether the checkbox is selected. */
@@ -25,9 +28,7 @@ export interface CheckboxAria {
   /** Whether the checkbox is disabled. */
   isDisabled: boolean,
   /** Whether the checkbox is read only. */
-  isReadOnly: boolean,
-  /** Whether the checkbox is invalid. */
-  isInvalid: boolean
+  isReadOnly: boolean
 }
 
 /**
@@ -39,9 +40,17 @@ export interface CheckboxAria {
  * @param inputRef - A ref for the HTML input element.
  */
 export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {
-  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid} = useToggle(props, state, inputRef);
+  // Create validation state here because it doesn't make sense to add to general useToggleState.
+  let validationState = useFormValidationState({...props, value: state.isSelected});
+  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;
+  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly} = useToggle({
+    ...props,
+    isInvalid
+  }, state, inputRef);
+
+  useFormValidation(props, validationState, inputRef);
 
-  let {isIndeterminate} = props;
+  let {isIndeterminate, isRequired, validationBehavior = 'aria'} = props;
   useEffect(() => {
     // indeterminate is a property, but it can only be set via javascript
     // https://css-tricks.com/indeterminate-checkboxes/
@@ -53,12 +62,16 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
   return {
     inputProps: {
       ...inputProps,
-      checked: isSelected
+      checked: isSelected,
+      'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
+      required: isRequired && validationBehavior === 'native'
     },
     isSelected,
     isPressed,
     isDisabled,
     isReadOnly,
-    isInvalid
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }

package/src/useCheckboxGroup.ts

@@ -11,13 +11,13 @@
  */
 
 import {AriaCheckboxGroupProps} from '@react-types/checkbox';
-import {checkboxGroupDescriptionIds, checkboxGroupErrorMessageIds, checkboxGroupNames} from './utils';
+import {checkboxGroupData} from './utils';
 import {CheckboxGroupState} from '@react-stately/checkbox';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, ValidationResult} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {useField} from '@react-aria/label';
 
-export interface CheckboxGroupAria {
+export interface CheckboxGroupAria extends ValidationResult {
   /** Props for the checkbox group wrapper element. */
   groupProps: DOMAttributes,
   /** Props for the checkbox group's visible label (if any). */
@@ -35,21 +35,26 @@ export interface CheckboxGroupAria {
  * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.
  */
 export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxGroupState): CheckboxGroupAria {
-  let {isDisabled, name} = props;
+  let {isDisabled, name, validationBehavior = 'aria'} = props;
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
 
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     // Checkbox group is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
   });
-  checkboxGroupDescriptionIds.set(state, descriptionProps.id);
-  checkboxGroupErrorMessageIds.set(state, errorMessageProps.id);
 
-  let domProps = filterDOMProps(props, {labelable: true});
+  checkboxGroupData.set(state, {
+    name,
+    descriptionId: descriptionProps.id,
+    errorMessageId: errorMessageProps.id,
+    validationBehavior
+  });
 
-  // Pass name prop from group to all items by attaching to the state.
-  checkboxGroupNames.set(state, name);
+  let domProps = filterDOMProps(props, {labelable: true});
 
   return {
     groupProps: mergeProps(domProps, {
@@ -59,6 +64,9 @@ export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxG
     }),
     labelProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }

package/src/useCheckboxGroupItem.ts

@@ -12,9 +12,10 @@
 
 import {AriaCheckboxGroupItemProps} from '@react-types/checkbox';
 import {CheckboxAria, useCheckbox} from './useCheckbox';
-import {checkboxGroupDescriptionIds, checkboxGroupErrorMessageIds, checkboxGroupNames} from './utils';
+import {checkboxGroupData} from './utils';
 import {CheckboxGroupState} from '@react-stately/checkbox';
-import {RefObject} from 'react';
+import {DEFAULT_VALIDATION_RESULT, privateValidationStateProp, useFormValidationState} from '@react-stately/form';
+import {RefObject, useEffect, useRef} from 'react';
 import {useToggleState} from '@react-stately/toggle';
 
 /**
@@ -41,11 +42,47 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
     }
   });
 
+  let {name, descriptionId, errorMessageId, validationBehavior} = checkboxGroupData.get(state)!;
+  validationBehavior = props.validationBehavior ?? validationBehavior;
+
+  // Local validation for this checkbox.
+  let {realtimeValidation} = useFormValidationState({
+    ...props,
+    value: toggleState.isSelected,
+    // Server validation is handled at the group level.
+    name: undefined,
+    validationBehavior: 'aria'
+  });
+
+  // Update the checkbox group state when realtime validation changes.
+  let nativeValidation = useRef(DEFAULT_VALIDATION_RESULT);
+  let updateValidation = () => {
+    state.setInvalid(props.value, realtimeValidation.isInvalid ? realtimeValidation : nativeValidation.current);
+  };
+
+  useEffect(updateValidation);
+
+  // Combine group and checkbox level validation.
+  let combinedRealtimeValidation = state.realtimeValidation.isInvalid ? state.realtimeValidation : realtimeValidation;
+  let displayValidation = validationBehavior === 'native' ? state.displayValidation : combinedRealtimeValidation;
+
   let res = useCheckbox({
     ...props,
     isReadOnly: props.isReadOnly || state.isReadOnly,
     isDisabled: props.isDisabled || state.isDisabled,
-    name: props.name || checkboxGroupNames.get(state)
+    name: props.name || name,
+    isRequired: props.isRequired ?? state.isRequired,
+    validationBehavior,
+    [privateValidationStateProp]: {
+      realtimeValidation: combinedRealtimeValidation,
+      displayValidation,
+      resetValidation: state.resetValidation,
+      commitValidation: state.commitValidation,
+      updateValidation(v) {
+        nativeValidation.current = v;
+        updateValidation();
+      }
+    }
   }, toggleState, inputRef);
 
   return {
@@ -54,8 +91,8 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
       ...res.inputProps,
       'aria-describedby': [
         props['aria-describedby'],
-        state.isInvalid ? checkboxGroupErrorMessageIds.get(state) : null,
-        checkboxGroupDescriptionIds.get(state)
+        state.isInvalid ? errorMessageId : null,
+        descriptionId
       ].filter(Boolean).join(' ') || undefined
     }
   };

package/src/utils.ts

@@ -12,6 +12,11 @@
 
 import {CheckboxGroupState} from '@react-stately/checkbox';
 
-export const checkboxGroupNames = new WeakMap<CheckboxGroupState, string>();
-export const checkboxGroupDescriptionIds = new WeakMap<CheckboxGroupState, string>();
-export const checkboxGroupErrorMessageIds = new WeakMap<CheckboxGroupState, string>();
+interface CheckboxGroupData {
+  name: string,
+  descriptionId: string,
+  errorMessageId: string,
+  validationBehavior: 'aria' | 'native'
+}
+
+export const checkboxGroupData = new WeakMap<CheckboxGroupState, CheckboxGroupData>();