@bento/checkbox 0.1.2

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 GoDaddy Operating Company, LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.mdx

@@ -0,0 +1,118 @@
+import { Meta, ArgTypes, Story, Controls, Source } from '@storybook/addon-docs/blocks';
+import * as Stories from './checkbox.stories.tsx';
+import CheckboxControlledExample from './examples/checkbox-controlled.tsx?raw';
+import CheckboxExample from './examples/checkbox.tsx?raw';
+import CheckboxGroupExample from './examples/checkbox-group.tsx?raw';
+import CheckboxGroupControlledExample from './examples/checkbox-group-controlled.tsx?raw';
+import CheckboxGroupIndeterminateExample from './examples/checkbox-group-indeterminate.tsx?raw';
+
+<Meta of={Stories} name="Overview" />
+
+# Checkbox
+
+The `@bento/checkbox` package provides accessible and customizable checkbox inputs. It exports the **CheckboxGroup** and **Checkbox** primitives, enabling you to build individual or groups of checkboxes with consistent keyboard navigation, focus management, and ARIA support. React Aria is used to ensure that the checkboxes are accessible to all users.
+
+The `CheckboxGroup` allows a user to select multiple items from a list of `Checkbox` components.
+
+The `Checkbox` is a single checkbox option that can be selected by the user.
+
+# Installation
+
+```bash
+npm install --save @bento/checkbox
+```
+
+## Props
+
+The following properties are available to be used on the `CheckboxGroup` and `Checkbox` primitives:
+
+### Checkbox
+
+<ArgTypes of={Stories.CheckboxProps} />
+
+### CheckboxGroup
+
+<ArgTypes of={Stories.CheckboxGroupProps} />
+
+## Data Attributes, Slot Map and Props
+
+### Data Attributes
+
+The following data attributes can be used to style and customize the `CheckboxGroup` and `Checkbox` primitives.
+
+#### `CheckboxGroup` Data Attributes
+
+| Attribute       | Description                     |
+| --------------- | ------------------------------- |
+| `data-disabled` | Indicates the checkbox group is disabled |
+| `data-read-only` | Indicates the checkbox group is readonly |
+| `data-required` | Indicates the checkbox group is required |
+| `data-invalid`  | Indicates the checkbox group is invalid  |
+
+#### `Checkbox` Data Attributes
+
+| Attribute       | Description                     |
+| --------------- | ------------------------------- |
+| `data-disabled` | Indicates the checkbox is disabled |
+| `data-read-only` | Indicates the checkbox is readonly |
+| `data-required` | Indicates the checkbox is required |
+| `data-invalid`  | Indicates the checkbox is invalid  |
+| `data-indeterminate` | Indicates the checkbox is in an indeterminate state |
+| `data-pressed`       | Indicates the checkbox is being pressed |
+| `data-hovered`       | Indicates the checkbox is hovered       |
+| `data-focused`       | Indicates the checkbox has focus        |
+| `data-focus-visible` | Indicates focus should be visible    |
+| `data-selected`      | Indicates the checkbox is selected      |
+
+### Slot Map
+
+The `CheckboxGroup` and `Checkbox` primitives are built off of the `Control` and `ControlGroup` primitives, which provide a consisten set of slot values, as shown below.
+
+#### `CheckboxGroup` Slot Map
+
+| Slot Name           | Description                  |
+| ------------------- | ---------------------------- |
+| `group.label`       | Label for checkbox group     |
+| `group.description` | Description for checkbox group|
+| `group.error`       | Error message for checkbox group|
+
+#### `Checkbox` Slot Map
+
+| Slot Name       | Description    |
+| --------------- | -------------- |
+| `control.icon-checked`  | Icon for checked checkbox |
+| `control.icon-unchecked`  | Icon for unchecked checkbox |
+| `control.icon-indeterminate`  | Icon for indeterminate checkbox |
+| `control.label` | Text for checkbox |
+
+## Examples
+
+### Default Checkbox - Uncontrolled
+
+The `Checkbox` primitive is uncontrolled by default, meaning it manages its own state internally. You can also use it in a controlled manner by providing the `checked` and `onChange` props.
+
+<Source language="tsx" code={CheckboxExample} />
+
+### Controlled Checkbox
+
+The `Checkbox` can also be used in a controlled manner, where you manage its state externally with the `checked` and `onChange` props.
+
+<Source language="tsx" code={CheckboxControlledExample} />
+
+### Checkbox Group
+
+The `CheckboxGroup` allows a user to select multiple items from a list of `Checkbox` components.
+
+<Source language="tsx" code={CheckboxGroupExample} />
+
+### Controlled Checkbox Group
+
+The `CheckboxGroup` can also be used in a controlled manner, where you manage the state of the checkboxes externally with the `value` and `onChange` props.
+
+<Source language="tsx" code={CheckboxGroupControlledExample} />
+
+### Checkbox Group with Indeterminate State
+
+The `CheckboxGroup` can also support an indeterminate state, which is useful when some but not all checkboxes are selected. The complex state management shown here is an example of how to handle indeterminate states in a checkbox group in a common way.
+
+<Source language="tsx" code={CheckboxGroupIndeterminateExample} />

package/dist/index.cjs

@@ -0,0 +1,121 @@
+'use strict';
+
+var React2 = require('react');
+var control = require('@bento/control');
+var icon = require('@bento/icon');
+var slots = require('@bento/slots');
+var useProps = require('@bento/use-props');
+var reactAria = require('react-aria');
+var utils = require('@react-aria/utils');
+var reactStately = require('react-stately');
+var useDataAttributes = require('@bento/use-data-attributes');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+
+// src/checkbox.tsx
+var CheckboxGroupStateContext = React2__default.default.createContext(null);
+
+// src/checkbox.tsx
+var Checkbox = slots.withSlots("BentoCheckbox", function Checkbox2(args) {
+  const { props, apply } = useProps.useProps(args);
+  const {
+    isRequired = false,
+    isIndeterminate = false,
+    isDisabled: isDisabledProp = false,
+    isSelected: isSelectedProp = false,
+    isReadOnly: isReadOnlyProp = false
+  } = props;
+  const groupState = React2.useContext(CheckboxGroupStateContext);
+  const ref = React2.useRef(null);
+  const inputRef = utils.useObjectRef(React2.useMemo(() => utils.mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
+  let { labelProps, inputProps, isSelected, isReadOnly, isDisabled, isPressed, isInvalid } = groupState ? reactAria.useCheckboxGroupItem(
+    {
+      ...props,
+      // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
+      // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).
+      value: props.value
+    },
+    groupState,
+    inputRef
+  ) : reactAria.useCheckbox(
+    {
+      ...props
+    },
+    reactStately.useToggleState(props),
+    inputRef
+  );
+  const interactionDisabled = isDisabledProp || isDisabled || isReadOnly || isReadOnlyProp;
+  const { hoverProps, isHovered } = reactAria.useHover({
+    ...props,
+    isDisabled: interactionDisabled
+  });
+  const { isFocused, isFocusVisible, focusProps } = reactAria.useFocusRing();
+  return /* @__PURE__ */ React2__default.default.createElement(
+    control.Control,
+    {
+      slot: "control",
+      labelProps: utils.mergeProps(labelProps, hoverProps),
+      inputProps: utils.mergeProps(inputProps, focusProps),
+      label: props.children,
+      inputRef,
+      "aria-checked": isIndeterminate ? "mixed" : void 0,
+      ...apply(props, ["isReadOnly", "isSelected", "isIndeterminate", "isDisabled", "value", "autoFocus"]),
+      ...useDataAttributes.useDataAttributes({
+        selected: isSelected || isSelectedProp,
+        pressed: isPressed,
+        hovered: isHovered,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        disabled: interactionDisabled,
+        readOnly: isReadOnly || isReadOnlyProp,
+        invalid: isInvalid,
+        required: isRequired,
+        indeterminate: isIndeterminate
+      })
+    },
+    isIndeterminate ? /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-indeterminate", icon: "checkboxIndeterminate" }, /* @__PURE__ */ React2__default.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2__default.default.createElement("rect", { x: "6", y: "11", width: "12", height: "2", fill: "currentColor" }))) : isSelected ? /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-checked", icon: "checkboxChecked" }, /* @__PURE__ */ React2__default.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2__default.default.createElement("path", { d: "M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z", fill: "currentColor" }))) : /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-unchecked", icon: "checkboxUnchecked" }, /* @__PURE__ */ React2__default.default.createElement("svg", { width: 24, height: 24, "aria-hidden": "true" }, /* @__PURE__ */ React2__default.default.createElement("rect", { x: 4, y: 4, width: 16, height: 16, rx: 3, fill: "none", stroke: "gray", strokeWidth: 2 })))
+  );
+});
+var CheckboxGroup = slots.withSlots("BentoCheckboxGroup", function CheckboxGroup2(args) {
+  const { errorMessage, ...restArgs } = args;
+  const { props, apply } = useProps.useProps(restArgs);
+  const state = reactStately.useCheckboxGroupState(props);
+  const { children } = props;
+  const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = reactAria.useCheckboxGroup(
+    props,
+    state
+  );
+  const displayedErrorMessage = React2.useMemo(
+    function getErrorMessage() {
+      return typeof errorMessage === "function" ? errorMessage(validationResult) : errorMessage || validationResult.validationErrors.join(", ");
+    },
+    [errorMessage, validationResult]
+  );
+  return /* @__PURE__ */ React2__default.default.createElement(
+    control.ControlGroup,
+    {
+      slot: "group",
+      labelProps,
+      descriptionProps,
+      errorMessage: displayedErrorMessage,
+      errorMessageProps,
+      ...groupProps,
+      ...apply(props, ["isInvalid", "isDisabled", "isReadOnly", "isRequired", "validationBehavior"]),
+      ...useDataAttributes.useDataAttributes({
+        orientation: props.orientation || "vertical",
+        invalid: state.isInvalid,
+        disabled: state.isDisabled,
+        readonly: state.isReadOnly,
+        required: state.isRequired
+      })
+    },
+    /* @__PURE__ */ React2__default.default.createElement(CheckboxGroupStateContext.Provider, { value: state }, children)
+  );
+});
+
+exports.Checkbox = Checkbox;
+exports.CheckboxGroup = CheckboxGroup;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/checkbox-group-state.tsx","../src/checkbox.tsx","../src/checkbox-group.tsx"],"names":["React","withSlots","Checkbox","useProps","useContext","useRef","useObjectRef","useMemo","mergeRefs","useCheckboxGroupItem","useCheckbox","useToggleState","useHover","useFocusRing","Control","mergeProps","useDataAttributes","Icon","CheckboxGroup","useCheckboxGroupState","useCheckboxGroup","ControlGroup"],"mappings":"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","file":"index.cjs","sourcesContent":["import React from 'react';\nimport { CheckboxGroupState } from 'react-stately';\n\nexport const CheckboxGroupStateContext = React.createContext<CheckboxGroupState | null>(null);\n","import React, { useContext, useRef, useMemo } from 'react';\nimport { Control, ControlProps } from '@bento/control';\nimport { Icon } from '@bento/icon';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { useFocusRing, useHover, type AriaCheckboxProps, useCheckboxGroupItem, useCheckbox } from 'react-aria';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useToggleState } from 'react-stately';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxProps extends AriaCheckboxProps, Partial<Omit<ControlProps, keyof AriaCheckboxProps>> {\n  /** The value of the checkbox, used when submitting an HTML form. */\n  value?: string;\n\n  /** The name of the checkbox. */\n  name?: string;\n\n  /** A ref for the HTML input element. */\n  inputRef?: React.Ref<HTMLInputElement>;\n\n  /** The label for the checkbox. Accepts any renderable node. */\n  children?: React.ReactNode;\n\n  /** Whether the checkbox is required or not. */\n  isRequired?: boolean;\n\n  /** Whether the input can be selected but not changed by the user. */\n  isReadOnly?: boolean;\n\n  /**\n   * Whether the checkbox is disabled or not. Shows that a selection exists,\n   * but is not available in that circumstance.\n   */\n  isDisabled?: boolean;\n\n  /** Whether the element should receive focus on render. */\n  autoFocus?: boolean;\n\n  /** Whether the checkbox is in an indeterminate state. */\n  isIndeterminate?: boolean;\n\n  /** Whether the checkbox is in a selected state. */\n  isSelected?: boolean;\n}\n\n/**\n * The `Checkbox` is a single checkbox option that can be selected by the user.\n *\n * @component\n * @param args - The props {@link CheckboxProps} passed to the Checkbox component.\n *\n * @public\n */\nexport const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: CheckboxProps) {\n  const { props, apply } = useProps(args);\n  const {\n    isRequired = false,\n    isIndeterminate = false,\n    isDisabled: isDisabledProp = false,\n    isSelected: isSelectedProp = false,\n    isReadOnly: isReadOnlyProp = false\n  } = props;\n\n  const groupState = useContext(CheckboxGroupStateContext);\n\n  const ref = useRef<HTMLInputElement>(null);\n  const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n\n  let { labelProps, inputProps, isSelected, isReadOnly, isDisabled, isPressed, isInvalid } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...props,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).\n          value: (props as Required<Pick<typeof props, 'value'>>).value\n        },\n        groupState,\n        inputRef\n      )\n    : useCheckbox(\n        {\n          ...props\n        },\n        useToggleState(props),\n        inputRef\n      );\n\n  const interactionDisabled = isDisabledProp || isDisabled || isReadOnly || isReadOnlyProp;\n  const { hoverProps, isHovered } = useHover({\n    ...props,\n    isDisabled: interactionDisabled\n  });\n  const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n\n  return (\n    <Control\n      slot=\"control\"\n      labelProps={mergeProps(labelProps, hoverProps)}\n      inputProps={mergeProps(inputProps, focusProps)}\n      label={props.children}\n      inputRef={inputRef}\n      aria-checked={isIndeterminate ? 'mixed' : undefined}\n      {...apply(props, ['isReadOnly', 'isSelected', 'isIndeterminate', 'isDisabled', 'value', 'autoFocus'])}\n      {...useDataAttributes({\n        selected: isSelected || isSelectedProp,\n        pressed: isPressed,\n        hovered: isHovered,\n        focused: isFocused,\n        focusVisible: isFocusVisible,\n        disabled: interactionDisabled,\n        readOnly: isReadOnly || isReadOnlyProp,\n        invalid: isInvalid,\n        required: isRequired,\n        indeterminate: isIndeterminate\n      })}\n    >\n      {isIndeterminate ? (\n        <Icon slot=\"icon-indeterminate\" icon=\"checkboxIndeterminate\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"6\" y=\"11\" width=\"12\" height=\"2\" fill=\"currentColor\" />\n          </svg>\n        </Icon>\n      ) : isSelected ? (\n        <Icon slot=\"icon-checked\" icon=\"checkboxChecked\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z\" fill=\"currentColor\" />\n          </svg>\n        </Icon>\n      ) : (\n        <Icon slot=\"icon-unchecked\" icon=\"checkboxUnchecked\">\n          <svg width={24} height={24} aria-hidden=\"true\">\n            <rect x={4} y={4} width={16} height={16} rx={3} fill=\"none\" stroke=\"gray\" strokeWidth={2} />\n          </svg>\n        </Icon>\n      )}\n    </Control>\n  );\n});\n","import React, { useMemo } from 'react';\nimport { useProps } from '@bento/use-props';\nimport { ControlGroup, ControlGroupProps } from '@bento/control';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { type ValidationResult } from '@react-types/shared';\nimport { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\nimport { withSlots } from '@bento/slots';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxGroupProps\n  extends AriaCheckboxGroupProps,\n    Partial<Omit<ControlGroupProps, keyof AriaCheckboxGroupProps>> {\n  /** The current value of the checkbox group (controlled). */\n  value?: string[];\n\n  /** The default value of the checkbox group (uncontrolled). */\n  defaultValue?: string[];\n\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n\n  /** Whether the input can be selected but not changed by the user. */\n  isReadOnly?: boolean;\n\n  /** Whether user input is required on the input before form submission. */\n  isRequired?: boolean;\n\n  /** Whether the input value is invalid. */\n  isInvalid?: boolean;\n\n  /** The name of the input element, used when submitting an HTML form. */\n  name?: string;\n\n  /**\n   * The <form> element to associate the input with.\n   * The value of this attribute must be the id of a <form> in the same document.\n   */\n  form?: string;\n\n  /** Description for the checkbox group. */\n  description?: string;\n\n  /** Checkbox children. */\n  children?: React.ReactNode;\n\n  /** Error message for the checkbox group. */\n  errorMessage?: React.ReactNode | ((val: ValidationResult) => React.ReactNode);\n}\n\n/**\n * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.\n *\n * @component\n * @param {CheckboxGroupProps} args - The props passed to the CheckboxGroup component.\n *\n * @public\n */\nexport const CheckboxGroup = withSlots('BentoCheckboxGroup', function CheckboxGroup(args: CheckboxGroupProps) {\n  const { errorMessage, ...restArgs } = args;\n  const { props, apply } = useProps(restArgs);\n  const state = useCheckboxGroupState(props);\n  const { children } = props;\n  const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(\n    props,\n    state\n  );\n\n  const displayedErrorMessage = useMemo(\n    function getErrorMessage() {\n      return typeof errorMessage === 'function'\n        ? errorMessage(validationResult)\n        : errorMessage || validationResult.validationErrors.join(', ');\n    },\n    [errorMessage, validationResult]\n  );\n\n  return (\n    <ControlGroup\n      slot=\"group\"\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessage={displayedErrorMessage}\n      errorMessageProps={errorMessageProps}\n      {...groupProps}\n      {...apply(props, ['isInvalid', 'isDisabled', 'isReadOnly', 'isRequired', 'validationBehavior'])}\n      {...useDataAttributes({\n        orientation: props.orientation || 'vertical',\n        invalid: state.isInvalid,\n        disabled: state.isDisabled,\n        readonly: state.isReadOnly,\n        required: state.isRequired\n      })}\n    >\n      <CheckboxGroupStateContext.Provider value={state}>{children}</CheckboxGroupStateContext.Provider>\n    </ControlGroup>\n  );\n});\n"]}

package/dist/index.d.cts

@@ -0,0 +1,79 @@
+import * as _bento_slots from '@bento/slots';
+import React from 'react';
+import { ControlProps, ControlGroupProps } from '@bento/control';
+import { AriaCheckboxProps, AriaCheckboxGroupProps } from 'react-aria';
+import { ValidationResult } from '@react-types/shared';
+
+interface CheckboxProps extends AriaCheckboxProps, Partial<Omit<ControlProps, keyof AriaCheckboxProps>> {
+    /** The value of the checkbox, used when submitting an HTML form. */
+    value?: string;
+    /** The name of the checkbox. */
+    name?: string;
+    /** A ref for the HTML input element. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** The label for the checkbox. Accepts any renderable node. */
+    children?: React.ReactNode;
+    /** Whether the checkbox is required or not. */
+    isRequired?: boolean;
+    /** Whether the input can be selected but not changed by the user. */
+    isReadOnly?: boolean;
+    /**
+     * Whether the checkbox is disabled or not. Shows that a selection exists,
+     * but is not available in that circumstance.
+     */
+    isDisabled?: boolean;
+    /** Whether the element should receive focus on render. */
+    autoFocus?: boolean;
+    /** Whether the checkbox is in an indeterminate state. */
+    isIndeterminate?: boolean;
+    /** Whether the checkbox is in a selected state. */
+    isSelected?: boolean;
+}
+/**
+ * The `Checkbox` is a single checkbox option that can be selected by the user.
+ *
+ * @component
+ * @param args - The props {@link CheckboxProps} passed to the Checkbox component.
+ *
+ * @public
+ */
+declare const Checkbox: React.NamedExoticComponent<CheckboxProps & _bento_slots.Slots>;
+
+interface CheckboxGroupProps extends AriaCheckboxGroupProps, Partial<Omit<ControlGroupProps, keyof AriaCheckboxGroupProps>> {
+    /** The current value of the checkbox group (controlled). */
+    value?: string[];
+    /** The default value of the checkbox group (uncontrolled). */
+    defaultValue?: string[];
+    /** Whether the input is disabled. */
+    isDisabled?: boolean;
+    /** Whether the input can be selected but not changed by the user. */
+    isReadOnly?: boolean;
+    /** Whether user input is required on the input before form submission. */
+    isRequired?: boolean;
+    /** Whether the input value is invalid. */
+    isInvalid?: boolean;
+    /** The name of the input element, used when submitting an HTML form. */
+    name?: string;
+    /**
+     * The <form> element to associate the input with.
+     * The value of this attribute must be the id of a <form> in the same document.
+     */
+    form?: string;
+    /** Description for the checkbox group. */
+    description?: string;
+    /** Checkbox children. */
+    children?: React.ReactNode;
+    /** Error message for the checkbox group. */
+    errorMessage?: React.ReactNode | ((val: ValidationResult) => React.ReactNode);
+}
+/**
+ * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.
+ *
+ * @component
+ * @param {CheckboxGroupProps} args - The props passed to the CheckboxGroup component.
+ *
+ * @public
+ */
+declare const CheckboxGroup: React.NamedExoticComponent<CheckboxGroupProps & _bento_slots.Slots>;
+
+export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };

package/dist/index.d.ts

@@ -0,0 +1,79 @@
+import * as _bento_slots from '@bento/slots';
+import React from 'react';
+import { ControlProps, ControlGroupProps } from '@bento/control';
+import { AriaCheckboxProps, AriaCheckboxGroupProps } from 'react-aria';
+import { ValidationResult } from '@react-types/shared';
+
+interface CheckboxProps extends AriaCheckboxProps, Partial<Omit<ControlProps, keyof AriaCheckboxProps>> {
+    /** The value of the checkbox, used when submitting an HTML form. */
+    value?: string;
+    /** The name of the checkbox. */
+    name?: string;
+    /** A ref for the HTML input element. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** The label for the checkbox. Accepts any renderable node. */
+    children?: React.ReactNode;
+    /** Whether the checkbox is required or not. */
+    isRequired?: boolean;
+    /** Whether the input can be selected but not changed by the user. */
+    isReadOnly?: boolean;
+    /**
+     * Whether the checkbox is disabled or not. Shows that a selection exists,
+     * but is not available in that circumstance.
+     */
+    isDisabled?: boolean;
+    /** Whether the element should receive focus on render. */
+    autoFocus?: boolean;
+    /** Whether the checkbox is in an indeterminate state. */
+    isIndeterminate?: boolean;
+    /** Whether the checkbox is in a selected state. */
+    isSelected?: boolean;
+}
+/**
+ * The `Checkbox` is a single checkbox option that can be selected by the user.
+ *
+ * @component
+ * @param args - The props {@link CheckboxProps} passed to the Checkbox component.
+ *
+ * @public
+ */
+declare const Checkbox: React.NamedExoticComponent<CheckboxProps & _bento_slots.Slots>;
+
+interface CheckboxGroupProps extends AriaCheckboxGroupProps, Partial<Omit<ControlGroupProps, keyof AriaCheckboxGroupProps>> {
+    /** The current value of the checkbox group (controlled). */
+    value?: string[];
+    /** The default value of the checkbox group (uncontrolled). */
+    defaultValue?: string[];
+    /** Whether the input is disabled. */
+    isDisabled?: boolean;
+    /** Whether the input can be selected but not changed by the user. */
+    isReadOnly?: boolean;
+    /** Whether user input is required on the input before form submission. */
+    isRequired?: boolean;
+    /** Whether the input value is invalid. */
+    isInvalid?: boolean;
+    /** The name of the input element, used when submitting an HTML form. */
+    name?: string;
+    /**
+     * The <form> element to associate the input with.
+     * The value of this attribute must be the id of a <form> in the same document.
+     */
+    form?: string;
+    /** Description for the checkbox group. */
+    description?: string;
+    /** Checkbox children. */
+    children?: React.ReactNode;
+    /** Error message for the checkbox group. */
+    errorMessage?: React.ReactNode | ((val: ValidationResult) => React.ReactNode);
+}
+/**
+ * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.
+ *
+ * @component
+ * @param {CheckboxGroupProps} args - The props passed to the CheckboxGroup component.
+ *
+ * @public
+ */
+declare const CheckboxGroup: React.NamedExoticComponent<CheckboxGroupProps & _bento_slots.Slots>;
+
+export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };

package/dist/index.js

@@ -0,0 +1,114 @@
+import React2, { useContext, useRef, useMemo } from 'react';
+import { Control, ControlGroup } from '@bento/control';
+import { Icon } from '@bento/icon';
+import { withSlots } from '@bento/slots';
+import { useProps } from '@bento/use-props';
+import { useCheckboxGroupItem, useCheckbox, useHover, useFocusRing, useCheckboxGroup } from 'react-aria';
+import { useObjectRef, mergeRefs, mergeProps } from '@react-aria/utils';
+import { useToggleState, useCheckboxGroupState } from 'react-stately';
+import { useDataAttributes } from '@bento/use-data-attributes';
+
+// src/checkbox.tsx
+var CheckboxGroupStateContext = React2.createContext(null);
+
+// src/checkbox.tsx
+var Checkbox = withSlots("BentoCheckbox", function Checkbox2(args) {
+  const { props, apply } = useProps(args);
+  const {
+    isRequired = false,
+    isIndeterminate = false,
+    isDisabled: isDisabledProp = false,
+    isSelected: isSelectedProp = false,
+    isReadOnly: isReadOnlyProp = false
+  } = props;
+  const groupState = useContext(CheckboxGroupStateContext);
+  const ref = useRef(null);
+  const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
+  let { labelProps, inputProps, isSelected, isReadOnly, isDisabled, isPressed, isInvalid } = groupState ? useCheckboxGroupItem(
+    {
+      ...props,
+      // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
+      // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).
+      value: props.value
+    },
+    groupState,
+    inputRef
+  ) : useCheckbox(
+    {
+      ...props
+    },
+    useToggleState(props),
+    inputRef
+  );
+  const interactionDisabled = isDisabledProp || isDisabled || isReadOnly || isReadOnlyProp;
+  const { hoverProps, isHovered } = useHover({
+    ...props,
+    isDisabled: interactionDisabled
+  });
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing();
+  return /* @__PURE__ */ React2.createElement(
+    Control,
+    {
+      slot: "control",
+      labelProps: mergeProps(labelProps, hoverProps),
+      inputProps: mergeProps(inputProps, focusProps),
+      label: props.children,
+      inputRef,
+      "aria-checked": isIndeterminate ? "mixed" : void 0,
+      ...apply(props, ["isReadOnly", "isSelected", "isIndeterminate", "isDisabled", "value", "autoFocus"]),
+      ...useDataAttributes({
+        selected: isSelected || isSelectedProp,
+        pressed: isPressed,
+        hovered: isHovered,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        disabled: interactionDisabled,
+        readOnly: isReadOnly || isReadOnlyProp,
+        invalid: isInvalid,
+        required: isRequired,
+        indeterminate: isIndeterminate
+      })
+    },
+    isIndeterminate ? /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-indeterminate", icon: "checkboxIndeterminate" }, /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2.createElement("rect", { x: "6", y: "11", width: "12", height: "2", fill: "currentColor" }))) : isSelected ? /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-checked", icon: "checkboxChecked" }, /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2.createElement("path", { d: "M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z", fill: "currentColor" }))) : /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-unchecked", icon: "checkboxUnchecked" }, /* @__PURE__ */ React2.createElement("svg", { width: 24, height: 24, "aria-hidden": "true" }, /* @__PURE__ */ React2.createElement("rect", { x: 4, y: 4, width: 16, height: 16, rx: 3, fill: "none", stroke: "gray", strokeWidth: 2 })))
+  );
+});
+var CheckboxGroup = withSlots("BentoCheckboxGroup", function CheckboxGroup2(args) {
+  const { errorMessage, ...restArgs } = args;
+  const { props, apply } = useProps(restArgs);
+  const state = useCheckboxGroupState(props);
+  const { children } = props;
+  const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(
+    props,
+    state
+  );
+  const displayedErrorMessage = useMemo(
+    function getErrorMessage() {
+      return typeof errorMessage === "function" ? errorMessage(validationResult) : errorMessage || validationResult.validationErrors.join(", ");
+    },
+    [errorMessage, validationResult]
+  );
+  return /* @__PURE__ */ React2.createElement(
+    ControlGroup,
+    {
+      slot: "group",
+      labelProps,
+      descriptionProps,
+      errorMessage: displayedErrorMessage,
+      errorMessageProps,
+      ...groupProps,
+      ...apply(props, ["isInvalid", "isDisabled", "isReadOnly", "isRequired", "validationBehavior"]),
+      ...useDataAttributes({
+        orientation: props.orientation || "vertical",
+        invalid: state.isInvalid,
+        disabled: state.isDisabled,
+        readonly: state.isReadOnly,
+        required: state.isRequired
+      })
+    },
+    /* @__PURE__ */ React2.createElement(CheckboxGroupStateContext.Provider, { value: state }, children)
+  );
+});
+
+export { Checkbox, CheckboxGroup };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/checkbox-group-state.tsx","../src/checkbox.tsx","../src/checkbox-group.tsx"],"names":["React","Checkbox","withSlots","CheckboxGroup","useProps","useMemo","useDataAttributes"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\nimport { CheckboxGroupState } from 'react-stately';\n\nexport const CheckboxGroupStateContext = React.createContext<CheckboxGroupState | null>(null);\n","import React, { useContext, useRef, useMemo } from 'react';\nimport { Control, ControlProps } from '@bento/control';\nimport { Icon } from '@bento/icon';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { useFocusRing, useHover, type AriaCheckboxProps, useCheckboxGroupItem, useCheckbox } from 'react-aria';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useToggleState } from 'react-stately';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxProps extends AriaCheckboxProps, Partial<Omit<ControlProps, keyof AriaCheckboxProps>> {\n  /** The value of the checkbox, used when submitting an HTML form. */\n  value?: string;\n\n  /** The name of the checkbox. */\n  name?: string;\n\n  /** A ref for the HTML input element. */\n  inputRef?: React.Ref<HTMLInputElement>;\n\n  /** The label for the checkbox. Accepts any renderable node. */\n  children?: React.ReactNode;\n\n  /** Whether the checkbox is required or not. */\n  isRequired?: boolean;\n\n  /** Whether the input can be selected but not changed by the user. */\n  isReadOnly?: boolean;\n\n  /**\n   * Whether the checkbox is disabled or not. Shows that a selection exists,\n   * but is not available in that circumstance.\n   */\n  isDisabled?: boolean;\n\n  /** Whether the element should receive focus on render. */\n  autoFocus?: boolean;\n\n  /** Whether the checkbox is in an indeterminate state. */\n  isIndeterminate?: boolean;\n\n  /** Whether the checkbox is in a selected state. */\n  isSelected?: boolean;\n}\n\n/**\n * The `Checkbox` is a single checkbox option that can be selected by the user.\n *\n * @component\n * @param args - The props {@link CheckboxProps} passed to the Checkbox component.\n *\n * @public\n */\nexport const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: CheckboxProps) {\n  const { props, apply } = useProps(args);\n  const {\n    isRequired = false,\n    isIndeterminate = false,\n    isDisabled: isDisabledProp = false,\n    isSelected: isSelectedProp = false,\n    isReadOnly: isReadOnlyProp = false\n  } = props;\n\n  const groupState = useContext(CheckboxGroupStateContext);\n\n  const ref = useRef<HTMLInputElement>(null);\n  const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n\n  let { labelProps, inputProps, isSelected, isReadOnly, isDisabled, isPressed, isInvalid } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...props,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).\n          value: (props as Required<Pick<typeof props, 'value'>>).value\n        },\n        groupState,\n        inputRef\n      )\n    : useCheckbox(\n        {\n          ...props\n        },\n        useToggleState(props),\n        inputRef\n      );\n\n  const interactionDisabled = isDisabledProp || isDisabled || isReadOnly || isReadOnlyProp;\n  const { hoverProps, isHovered } = useHover({\n    ...props,\n    isDisabled: interactionDisabled\n  });\n  const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n\n  return (\n    <Control\n      slot=\"control\"\n      labelProps={mergeProps(labelProps, hoverProps)}\n      inputProps={mergeProps(inputProps, focusProps)}\n      label={props.children}\n      inputRef={inputRef}\n      aria-checked={isIndeterminate ? 'mixed' : undefined}\n      {...apply(props, ['isReadOnly', 'isSelected', 'isIndeterminate', 'isDisabled', 'value', 'autoFocus'])}\n      {...useDataAttributes({\n        selected: isSelected || isSelectedProp,\n        pressed: isPressed,\n        hovered: isHovered,\n        focused: isFocused,\n        focusVisible: isFocusVisible,\n        disabled: interactionDisabled,\n        readOnly: isReadOnly || isReadOnlyProp,\n        invalid: isInvalid,\n        required: isRequired,\n        indeterminate: isIndeterminate\n      })}\n    >\n      {isIndeterminate ? (\n        <Icon slot=\"icon-indeterminate\" icon=\"checkboxIndeterminate\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"6\" y=\"11\" width=\"12\" height=\"2\" fill=\"currentColor\" />\n          </svg>\n        </Icon>\n      ) : isSelected ? (\n        <Icon slot=\"icon-checked\" icon=\"checkboxChecked\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z\" fill=\"currentColor\" />\n          </svg>\n        </Icon>\n      ) : (\n        <Icon slot=\"icon-unchecked\" icon=\"checkboxUnchecked\">\n          <svg width={24} height={24} aria-hidden=\"true\">\n            <rect x={4} y={4} width={16} height={16} rx={3} fill=\"none\" stroke=\"gray\" strokeWidth={2} />\n          </svg>\n        </Icon>\n      )}\n    </Control>\n  );\n});\n","import React, { useMemo } from 'react';\nimport { useProps } from '@bento/use-props';\nimport { ControlGroup, ControlGroupProps } from '@bento/control';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { type ValidationResult } from '@react-types/shared';\nimport { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\nimport { withSlots } from '@bento/slots';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxGroupProps\n  extends AriaCheckboxGroupProps,\n    Partial<Omit<ControlGroupProps, keyof AriaCheckboxGroupProps>> {\n  /** The current value of the checkbox group (controlled). */\n  value?: string[];\n\n  /** The default value of the checkbox group (uncontrolled). */\n  defaultValue?: string[];\n\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n\n  /** Whether the input can be selected but not changed by the user. */\n  isReadOnly?: boolean;\n\n  /** Whether user input is required on the input before form submission. */\n  isRequired?: boolean;\n\n  /** Whether the input value is invalid. */\n  isInvalid?: boolean;\n\n  /** The name of the input element, used when submitting an HTML form. */\n  name?: string;\n\n  /**\n   * The <form> element to associate the input with.\n   * The value of this attribute must be the id of a <form> in the same document.\n   */\n  form?: string;\n\n  /** Description for the checkbox group. */\n  description?: string;\n\n  /** Checkbox children. */\n  children?: React.ReactNode;\n\n  /** Error message for the checkbox group. */\n  errorMessage?: React.ReactNode | ((val: ValidationResult) => React.ReactNode);\n}\n\n/**\n * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.\n *\n * @component\n * @param {CheckboxGroupProps} args - The props passed to the CheckboxGroup component.\n *\n * @public\n */\nexport const CheckboxGroup = withSlots('BentoCheckboxGroup', function CheckboxGroup(args: CheckboxGroupProps) {\n  const { errorMessage, ...restArgs } = args;\n  const { props, apply } = useProps(restArgs);\n  const state = useCheckboxGroupState(props);\n  const { children } = props;\n  const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(\n    props,\n    state\n  );\n\n  const displayedErrorMessage = useMemo(\n    function getErrorMessage() {\n      return typeof errorMessage === 'function'\n        ? errorMessage(validationResult)\n        : errorMessage || validationResult.validationErrors.join(', ');\n    },\n    [errorMessage, validationResult]\n  );\n\n  return (\n    <ControlGroup\n      slot=\"group\"\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessage={displayedErrorMessage}\n      errorMessageProps={errorMessageProps}\n      {...groupProps}\n      {...apply(props, ['isInvalid', 'isDisabled', 'isReadOnly', 'isRequired', 'validationBehavior'])}\n      {...useDataAttributes({\n        orientation: props.orientation || 'vertical',\n        invalid: state.isInvalid,\n        disabled: state.isDisabled,\n        readonly: state.isReadOnly,\n        required: state.isRequired\n      })}\n    >\n      <CheckboxGroupStateContext.Provider value={state}>{children}</CheckboxGroupStateContext.Provider>\n    </ControlGroup>\n  );\n});\n"]}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@bento/checkbox",
+  "version": "0.1.2",
+  "description": "Checkbox component",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "scripts": {
+    "build": "tsup-node",
+    "lint": "biome lint && tsc",
+    "posttest": "npm run lint",
+    "pretest": "npm run build",
+    "test": "vitest --run",
+    "test:watch": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/godaddy/bento.git"
+  },
+  "keywords": [
+    "accessibility",
+    "aria",
+    "bento",
+    "checkbox",
+    "component",
+    "interactive",
+    "library",
+    "react"
+  ],
+  "author": "GoDaddy Operating Company, LLC",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/godaddy/bento/issues"
+  },
+  "homepage": "https://github.com/godaddy/bento#readme",
+  "files": [
+    "dist",
+    "src",
+    "package.json"
+  ],
+  "dependencies": {
+    "@bento/control": "^0.1.1",
+    "@bento/icon": "^0.1.1",
+    "@bento/slots": "^0.1.2",
+    "@bento/use-data-attributes": "^0.1.0",
+    "@bento/use-props": "^0.1.0",
+    "@react-aria/utils": "^3.30.0",
+    "react-aria": "^3.44.0",
+    "react-stately": "^3.42.0"
+  },
+  "peerDependencies": {
+    "react": "18.x || 19.x",
+    "react-dom": "18.x || 19.x"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/checkbox-group-state.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CheckboxGroupState } from 'react-stately';
+
+export const CheckboxGroupStateContext = React.createContext<CheckboxGroupState | null>(null);

package/src/checkbox-group.tsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react';
+import { useProps } from '@bento/use-props';
+import { ControlGroup, ControlGroupProps } from '@bento/control';
+import { useDataAttributes } from '@bento/use-data-attributes';
+import { type ValidationResult } from '@react-types/shared';
+import { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';
+import { useCheckboxGroupState } from 'react-stately';
+import { withSlots } from '@bento/slots';
+import { CheckboxGroupStateContext } from './checkbox-group-state';
+
+export interface CheckboxGroupProps
+  extends AriaCheckboxGroupProps,
+    Partial<Omit<ControlGroupProps, keyof AriaCheckboxGroupProps>> {
+  /** The current value of the checkbox group (controlled). */
+  value?: string[];
+
+  /** The default value of the checkbox group (uncontrolled). */
+  defaultValue?: string[];
+
+  /** Whether the input is disabled. */
+  isDisabled?: boolean;
+
+  /** Whether the input can be selected but not changed by the user. */
+  isReadOnly?: boolean;
+
+  /** Whether user input is required on the input before form submission. */
+  isRequired?: boolean;
+
+  /** Whether the input value is invalid. */
+  isInvalid?: boolean;
+
+  /** The name of the input element, used when submitting an HTML form. */
+  name?: string;
+
+  /**
+   * The <form> element to associate the input with.
+   * The value of this attribute must be the id of a <form> in the same document.
+   */
+  form?: string;
+
+  /** Description for the checkbox group. */
+  description?: string;
+
+  /** Checkbox children. */
+  children?: React.ReactNode;
+
+  /** Error message for the checkbox group. */
+  errorMessage?: React.ReactNode | ((val: ValidationResult) => React.ReactNode);
+}
+
+/**
+ * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.
+ *
+ * @component
+ * @param {CheckboxGroupProps} args - The props passed to the CheckboxGroup component.
+ *
+ * @public
+ */
+export const CheckboxGroup = withSlots('BentoCheckboxGroup', function CheckboxGroup(args: CheckboxGroupProps) {
+  const { errorMessage, ...restArgs } = args;
+  const { props, apply } = useProps(restArgs);
+  const state = useCheckboxGroupState(props);
+  const { children } = props;
+  const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(
+    props,
+    state
+  );
+
+  const displayedErrorMessage = useMemo(
+    function getErrorMessage() {
+      return typeof errorMessage === 'function'
+        ? errorMessage(validationResult)
+        : errorMessage || validationResult.validationErrors.join(', ');
+    },
+    [errorMessage, validationResult]
+  );
+
+  return (
+    <ControlGroup
+      slot="group"
+      labelProps={labelProps}
+      descriptionProps={descriptionProps}
+      errorMessage={displayedErrorMessage}
+      errorMessageProps={errorMessageProps}
+      {...groupProps}
+      {...apply(props, ['isInvalid', 'isDisabled', 'isReadOnly', 'isRequired', 'validationBehavior'])}
+      {...useDataAttributes({
+        orientation: props.orientation || 'vertical',
+        invalid: state.isInvalid,
+        disabled: state.isDisabled,
+        readonly: state.isReadOnly,
+        required: state.isRequired
+      })}
+    >
+      <CheckboxGroupStateContext.Provider value={state}>{children}</CheckboxGroupStateContext.Provider>
+    </ControlGroup>
+  );
+});

package/src/checkbox.tsx

@@ -0,0 +1,139 @@
+import React, { useContext, useRef, useMemo } from 'react';
+import { Control, ControlProps } from '@bento/control';
+import { Icon } from '@bento/icon';
+import { withSlots } from '@bento/slots';
+import { useProps } from '@bento/use-props';
+import { useFocusRing, useHover, type AriaCheckboxProps, useCheckboxGroupItem, useCheckbox } from 'react-aria';
+import { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';
+import { useToggleState } from 'react-stately';
+import { useDataAttributes } from '@bento/use-data-attributes';
+import { CheckboxGroupStateContext } from './checkbox-group-state';
+
+export interface CheckboxProps extends AriaCheckboxProps, Partial<Omit<ControlProps, keyof AriaCheckboxProps>> {
+  /** The value of the checkbox, used when submitting an HTML form. */
+  value?: string;
+
+  /** The name of the checkbox. */
+  name?: string;
+
+  /** A ref for the HTML input element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+
+  /** The label for the checkbox. Accepts any renderable node. */
+  children?: React.ReactNode;
+
+  /** Whether the checkbox is required or not. */
+  isRequired?: boolean;
+
+  /** Whether the input can be selected but not changed by the user. */
+  isReadOnly?: boolean;
+
+  /**
+   * Whether the checkbox is disabled or not. Shows that a selection exists,
+   * but is not available in that circumstance.
+   */
+  isDisabled?: boolean;
+
+  /** Whether the element should receive focus on render. */
+  autoFocus?: boolean;
+
+  /** Whether the checkbox is in an indeterminate state. */
+  isIndeterminate?: boolean;
+
+  /** Whether the checkbox is in a selected state. */
+  isSelected?: boolean;
+}
+
+/**
+ * The `Checkbox` is a single checkbox option that can be selected by the user.
+ *
+ * @component
+ * @param args - The props {@link CheckboxProps} passed to the Checkbox component.
+ *
+ * @public
+ */
+export const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: CheckboxProps) {
+  const { props, apply } = useProps(args);
+  const {
+    isRequired = false,
+    isIndeterminate = false,
+    isDisabled: isDisabledProp = false,
+    isSelected: isSelectedProp = false,
+    isReadOnly: isReadOnlyProp = false
+  } = props;
+
+  const groupState = useContext(CheckboxGroupStateContext);
+
+  const ref = useRef<HTMLInputElement>(null);
+  const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
+
+  let { labelProps, inputProps, isSelected, isReadOnly, isDisabled, isPressed, isInvalid } = groupState
+    ? useCheckboxGroupItem(
+        {
+          ...props,
+          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
+          // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).
+          value: (props as Required<Pick<typeof props, 'value'>>).value
+        },
+        groupState,
+        inputRef
+      )
+    : useCheckbox(
+        {
+          ...props
+        },
+        useToggleState(props),
+        inputRef
+      );
+
+  const interactionDisabled = isDisabledProp || isDisabled || isReadOnly || isReadOnlyProp;
+  const { hoverProps, isHovered } = useHover({
+    ...props,
+    isDisabled: interactionDisabled
+  });
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing();
+
+  return (
+    <Control
+      slot="control"
+      labelProps={mergeProps(labelProps, hoverProps)}
+      inputProps={mergeProps(inputProps, focusProps)}
+      label={props.children}
+      inputRef={inputRef}
+      aria-checked={isIndeterminate ? 'mixed' : undefined}
+      {...apply(props, ['isReadOnly', 'isSelected', 'isIndeterminate', 'isDisabled', 'value', 'autoFocus'])}
+      {...useDataAttributes({
+        selected: isSelected || isSelectedProp,
+        pressed: isPressed,
+        hovered: isHovered,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        disabled: interactionDisabled,
+        readOnly: isReadOnly || isReadOnlyProp,
+        invalid: isInvalid,
+        required: isRequired,
+        indeterminate: isIndeterminate
+      })}
+    >
+      {isIndeterminate ? (
+        <Icon slot="icon-indeterminate" icon="checkboxIndeterminate">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <rect x="6" y="11" width="12" height="2" fill="currentColor" />
+          </svg>
+        </Icon>
+      ) : isSelected ? (
+        <Icon slot="icon-checked" icon="checkboxChecked">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z" fill="currentColor" />
+          </svg>
+        </Icon>
+      ) : (
+        <Icon slot="icon-unchecked" icon="checkboxUnchecked">
+          <svg width={24} height={24} aria-hidden="true">
+            <rect x={4} y={4} width={16} height={16} rx={3} fill="none" stroke="gray" strokeWidth={2} />
+          </svg>
+        </Icon>
+      )}
+    </Control>
+  );
+});

package/src/index.tsx

@@ -0,0 +1,2 @@
+export * from './checkbox.tsx';
+export * from './checkbox-group.tsx';