feat: add CheckboxGroupField

src/Fields/CheckboxGroupField.tsx

@@ -0,0 +1,45 @@
+import { CheckboxGroupProps } from 'antd/es/checkbox';
+import React from 'react';
+import {
+  useController,
+  FieldValues,
+  UseControllerProps,
+  FieldPath,
+} from 'react-hook-form';
+
+import { Checkbox } from '../Checkbox';
+
+import { useFieldContext } from './FieldProvider';
+import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
+
+type CheckboxGroupFieldProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+> = UseControllerProps<TFieldValues, TName> &
+  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
+    component?: CheckboxGroupProps;
+  };
+
+export function CheckboxGroupField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  formItem,
+  component,
+  ...controller
+}: CheckboxGroupFieldProps<TFieldValues, TName>) {
+  const { field } = useController<TFieldValues, TName>(controller);
+
+  const { disabled } = useFieldContext();
+
+  return (
+    <FieldWrapper controller={controller} formItem={formItem}>
+      <Checkbox.Group
+        {...field}
+        value={field.value ?? undefined}
+        disabled={disabled}
+        {...component}
+      />
+    </FieldWrapper>
+  );
+}

src/Fields/index.stories.tsx

@@ -10,6 +10,7 @@ import { Space } from '../Space';
 
 import { AutocompleteField } from './AutocompleteField';
 import { CheckboxField } from './CheckboxField';
+import { CheckboxGroupField } from './CheckboxGroupField';
 import { FieldProvider, FieldProviderProps } from './FieldProvider';
 import { InputField } from './InputField';
 import { InputNumberField } from './InputNumberField';
@@ -26,6 +27,7 @@ export default {
 type FormType = {
   autocomplete: string;
   checkbox: boolean;
+  checkboxGroup: Array<string>;
   input: string;
   input_number: number;
   radio_group: 1 | 2;
@@ -143,6 +145,12 @@ function AllFields() {
       >
         Checkbox children
       </CheckboxField>
+      <CheckboxGroupField
+        name="checkboxGroup"
+        control={formMethods.control}
+        formItem={{ label: 'CheckboxGroup' }}
+        component={{ options: ['a', 'b'].map(toFormInputOption) }}
+      />
       <InputField
         name="input"
         rules={{ required: 'You really need this', maxLength: 3 }}

src/Fields/index.ts

@@ -1,5 +1,6 @@
 export * from './AutocompleteField';
 export * from './CheckboxField';
+export * from './CheckboxGroupField';
 export * from './FieldProvider';
 export * from './FieldWrapper';
 export * from './formItemFieldProps';