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: b535c93

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	Minor
@primer/brand-primitives	Minor
@primer/brand-e2e	Minor
@primer/brand-fonts	Minor
@primer/brand-config	Minor
@primer/brand-storybook	Minor

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.

[rezrah]

Non-blocking:

Appreciate these are probably from FormControl. We have newer animation-specific variables now, but none that match directly to this.

@joshfarrant, how close are these values to what's above? Can we sub them out? Can also do this in a separate PR.

[joshfarrant]

Yes this was pulled from FormControl. You can see the three curves below.

Our curve:

vs default:

vs glide:

I'd say that glide is probably the closest. Happy to switch this out

[joshfarrant]

I've just gone ahead and updated it to brand-animation-duration-glide

[rezrah]

Nit and more of a style preference: do we need the nested describe block? Could we instead rename the title of each test case to be more descriptive?

[joshfarrant]

Not required at all, but I quite like it as it

• Keeps test names more focussed
• Logically groups related tests in the code
• Groups tests in the output

Happy to remove it if you don't like it though

[rezrah]

Yeah this is more style and consistency thing. Having it all in one title means the purpose of test case can be understood in isolation, and without context. Nested describes assume that it's also labelled appropriately enough, which might not always be the case. I got caught out here for example, as I was reading the titles without realising they were referring to a specific aspect of the component aria-describedby. As it's not how we write our test cases everywhere else, I'd prefer to keep it consistent for readability reasons, though we can fix this later too so non-blocking.

[joshfarrant]

Cool, updated 👍

[rezrah]

Thanks @joshfarrant, these new components are great ✨