fix(FormControl): allow required check boxes

.changeset/wild-maps-grow.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(FormControl): allow required check boxes in CheckboxGroup

packages/react/src/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -100,7 +100,7 @@ Playground.argTypes = {
 export const Default = () => (
   <CheckboxGroup>
     <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
-    <FormControl>
+    <FormControl required>
       <Checkbox value="one" defaultChecked />
       <FormControl.Label>Choice one</FormControl.Label>
     </FormControl>

packages/react/src/FormControl/FormControl.stories.tsx

@@ -64,7 +64,7 @@ export const Default = () => (
   <FormControl required={true}>
     <FormControl.Label>Form Input Label</FormControl.Label>
     <FormControl.Caption>This is a caption</FormControl.Caption>
-    <Checkbox />
+    <TextInput />
   </FormControl>
 )
 

packages/react/src/FormControl/FormControl.tsx

@@ -62,6 +62,10 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
     const inputProps = React.isValidElement(InputComponent) && InputComponent.props
     const isChoiceInput =
       React.isValidElement(InputComponent) && (InputComponent.type === Checkbox || InputComponent.type === Radio)
+    const isPartOfCheckboxGroup =
+      React.isValidElement(InputComponent) &&
+      InputComponent.type === Checkbox &&
+      Object.keys(choiceGroupContext).length > 0
 
     if (InputComponent) {
       if (inputProps?.id) {
@@ -138,11 +142,14 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
                   InputComponent as React.ReactElement<{
                     id: string
                     disabled: boolean
+                    required: boolean
                     ['aria-describedby']: string
                   }>,
                   {
                     id,
                     disabled,
+                    // allow individual checkboxes that are part of a checkbox group to be required
+                    required: required && isPartOfCheckboxGroup,
                     ['aria-describedby']: captionId as string,
                   },
                 )}

packages/react/src/__tests__/FormControl.test.tsx

@@ -5,6 +5,7 @@ import axe from 'axe-core'
 import {
   Autocomplete,
   Checkbox,
+  CheckboxGroup,
   FormControl,
   Select,
   Textarea,
@@ -390,6 +391,41 @@ describe('FormControl', () => {
         expect(consoleSpy).toHaveBeenCalled()
         consoleSpy.mockRestore()
       })
+
+      it('should not add required prop to individual checkbox', async () => {
+        const {getByRole} = render(
+          <FormControl required>
+            <FormControl.Label>{LABEL_TEXT}</FormControl.Label>
+            <Checkbox />
+            <FormControl.Caption>{CAPTION_TEXT}</FormControl.Caption>
+          </FormControl>,
+        )
+
+        expect(getByRole('checkbox')).not.toBeRequired()
+      })
+
+      it('should allow required prop on checkbox if part of CheckboxGroup', async () => {
+        const {getByTestId} = render(
+          <CheckboxGroup>
+            <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>
+            <FormControl required>
+              <Checkbox value="checkOne" data-testid="checkbox-1" />
+              <FormControl.Label>Checkbox one</FormControl.Label>
+            </FormControl>
+            <FormControl>
+              <Checkbox value="checkTwo" data-testid="checkbox-2" />
+              <FormControl.Label>Checkbox two</FormControl.Label>
+            </FormControl>
+            <FormControl>
+              <Checkbox value="checkThree" />
+              <FormControl.Label>Checkbox three</FormControl.Label>
+            </FormControl>
+          </CheckboxGroup>,
+        )
+
+        expect(getByTestId('checkbox-1')).toBeRequired()
+        expect(getByTestId('checkbox-2')).not.toBeRequired()
+      })
     })
 
     it('should have no axe violations', async () => {