CheckboxGroup

apps/docs/src/usages/checkbox.tsx

@@ -1,18 +1,25 @@
-import React, { useEffect, useState } from 'react'
+import { Checkbox, CheckboxGroup } from 'actify'
 
-import { Checkbox } from 'actify'
+import React from 'react'
 
 export default () => {
   return (
-    <div className="flex flex-wrap gap-4">
-      <Checkbox isIndeterminate aria-label="isIndeterminate" />
-      <Checkbox color="primary" defaultSelected>
-        Primary
-      </Checkbox>
-      <Checkbox color="secondary" aria-label="secondary" />
-      <Checkbox color="tertiary" aria-label="tertiary" />
-      <Checkbox color="error" aria-label="error" />
-      <Checkbox isDisabled aria-label="isDisabled" />
-    </div>
+    <>
+      <div className="flex flex-wrap gap-4">
+        <Checkbox isIndeterminate aria-label="isIndeterminate" />
+        <Checkbox color="primary" defaultSelected>
+          Primary
+        </Checkbox>
+        <Checkbox color="secondary" aria-label="secondary" />
+        <Checkbox color="tertiary" aria-label="tertiary" />
+        <Checkbox color="error" aria-label="error" />
+      </div>
+      <CheckboxGroup label="Project">
+        <Checkbox value="actify">Actify</Checkbox>
+        <Checkbox value="ngroker">Ngroker</Checkbox>
+        <Checkbox value="taildoor">Taildoor</Checkbox>
+        <Checkbox value="hugola">Hugola</Checkbox>
+      </CheckboxGroup>
+    </>
   )
 }

packages/actify/src/components/Checkbox/CheckboxGroup.tsx

@@ -0,0 +1,50 @@
+import {
+  CheckboxGroupProps,
+  CheckboxGroupState,
+  useCheckboxGroupState
+} from 'react-stately'
+
+import { Label } from '../Label'
+import React from 'react'
+import { useCheckboxGroup } from 'react-aria'
+
+const CheckboxGroupContext = React.createContext<CheckboxGroupState | null>(
+  null
+)
+
+interface Props extends CheckboxGroupProps {
+  children?: React.ReactNode
+}
+const CheckboxGroup = (props: Props) => {
+  const { children, label, description } = props
+  const state = useCheckboxGroupState(props)
+  const {
+    groupProps,
+    labelProps,
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors
+  } = useCheckboxGroup(props, state)
+
+  return (
+    <div {...groupProps}>
+      <Label {...labelProps}>{label}</Label>
+      <CheckboxGroupContext.Provider value={state}>
+        {children}
+      </CheckboxGroupContext.Provider>
+      {description && (
+        <div {...descriptionProps} style={{ fontSize: 12 }}>
+          {description}
+        </div>
+      )}
+      {isInvalid && (
+        <div {...errorMessageProps} style={{ color: 'red', fontSize: 12 }}>
+          {validationErrors.join(' ')}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { CheckboxGroup }

packages/actify/src/components/Checkbox/index.ts

@@ -1 +1,2 @@
 export { Checkbox } from './Checkbox'
+export { CheckboxGroup } from './CheckboxGroup'