Add CheckboxGroup and RadioGroup components

[joshfarrant]

Summary

Adds CheckboxGroup and RadioGroup components which, for the time being, are just implementations of the new private ControlGroup component. These components allow us to group Radio and Checkbox components using a <fieldset> and label them with a <legend>, providing a more accessible and semantic way to group related form elements.

List of notable changes:

• Adds ControlGroup component (alternate name suggestions welcome)
• Adds CheckboxGroup and RadioGroup components, tests, and stories

Still to do (in future PRs)

• Add documentation for the new components
• Consume new components in our existing documentation and stories

What should reviewers focus on?

• There were some spacing inconsistencies between the Figma file I was using for reference and our actual form element sizes in Primer Brand.
  • Specifically, font sizes varied between the two. Figma has the font sizes of the Radio and Checkbox labels, as well as the validation, at 14px, but in PB they're all 16px. Could you advise which way to go with this please @danielguillan, as well as giving the design of the components a quick check too please?
• I used the new(ish) CSF3 in the stories. The only difference is the fact that stories now export objects with a render function, rather than exporting components. Although I didn't use it here, this has the added benefit of letting you create/update component stories from within the Storybook UI and save the new stories to disk. Happy to revert this if we'd prefer to keep things consistent, but at some point it might be a good idea to update all stories to CSF3 as one less thing to worry about for future Storybook upgrades.

Steps to test:

1. Take a look at the Storybook

Supporting resources (related issues, external links, etc):

• https://github.com/github/primer/issues/3761

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

RadioGroup	CheckboxGroup

[changeset-bot]

🦋 Changeset detected

Latest commit: 790fa13

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🟢 No design token changes found

Copilot reviewed 16 out of 26 changed files in this pull request and generated no suggestions.

Files not reviewed (10)

• packages/react/src/forms/InputGroup/InputGroup.module.css: Language not supported
• packages/react/src/forms/RadioGroup/RadioGroup.tsx: Evaluated as low risk
• packages/react/src/forms/CheckboxGroup/CheckboxGroup.stories.tsx: Evaluated as low risk
• packages/react/src/forms/CheckboxGroup/CheckboxGroup.test.tsx: Evaluated as low risk
• packages/react/src/forms/index.ts: Evaluated as low risk
• packages/react/src/forms/CheckboxGroup/index.ts: Evaluated as low risk
• .changeset/popular-seas-yawn.md: Evaluated as low risk
• packages/react/src/forms/InputGroup/index.ts: Evaluated as low risk
• packages/react/src/forms/RadioGroup/RadioGroup.stories.tsx: Evaluated as low risk
• packages/react/src/forms/RadioGroup/index.ts: Evaluated as low risk

Comments skipped due to low confidence (3)

packages/react/src/forms/CheckboxGroup/CheckboxGroup.visual.spec.ts:8

• Consider removing the eslint-disable comment and ensuring that the code adheres to the i18n-text/no-en rule.

// eslint-disable-next-line i18n-text/no-en

packages/react/src/forms/InputGroup/InputGroup.tsx:20

• The error message should be more concise and specific, e.g., 'useInputGroup must be used within an InputGroupProvider.'

throw new Error('useInputGroup must be used within an InputGroupProvider. Did you forget to wrap your component in a <InputGroupProvider>?')

packages/react/src/forms/CheckboxGroup/CheckboxGroup.tsx:14

• [nitpick] Consider adding a comment explaining that CheckboxGroup is currently just an alias for InputGroup to provide context for future maintainers.

export const CheckboxGroup = InputGroup

Tip: Copilot only keeps its highest confidence comments to reduce noise and keep you focused. Learn more

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.