diff --git a/apps/docs/src/usages/checkbox.tsx b/apps/docs/src/usages/checkbox.tsx
index 22fe1ab..3c0abf6 100644
--- a/apps/docs/src/usages/checkbox.tsx
+++ b/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 (
-
-
-
- Primary
-
-
-
-
-
-
+ <>
+
+
+
+ Primary
+
+
+
+
+
+
+ Actify
+ Ngroker
+ Taildoor
+ Hugola
+
+ >
)
}
diff --git a/packages/actify/src/components/Checkbox/CheckboxGroup.tsx b/packages/actify/src/components/Checkbox/CheckboxGroup.tsx
new file mode 100644
index 0000000..b0d8cbb
--- /dev/null
+++ b/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(
+ 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 (
+
+
+
+ {children}
+
+ {description && (
+
+ {description}
+
+ )}
+ {isInvalid && (
+
+ {validationErrors.join(' ')}
+
+ )}
+
+ )
+}
+
+export { CheckboxGroup }
diff --git a/packages/actify/src/components/Checkbox/index.ts b/packages/actify/src/components/Checkbox/index.ts
index 94d556f..4c9c941 100644
--- a/packages/actify/src/components/Checkbox/index.ts
+++ b/packages/actify/src/components/Checkbox/index.ts
@@ -1 +1,2 @@
export { Checkbox } from './Checkbox'
+export { CheckboxGroup } from './CheckboxGroup'