fix: allow passing `variant` prop to all checkboxes / radios through use...Group hook by unekinn · Pull Request #4864 · digdir/designsystemet

unekinn · 2026-05-07T14:21:56Z

Summary

useCheckboxGroup and useRadioGroup: these hooks now also accept the prop variant, which sets the variant for all the checkboxes or radios in the group.

Checks

I have read the contribution guidelines
I have added a changeset (run pnpm changeset if relevant)

changeset-bot · 2026-05-07T14:22:01Z

🦋 Changeset detected

Latest commit: ab8dc71

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

This PR includes changesets to release 5 packages

Name	Type
@digdir/designsystemet-react	Patch
@digdir/designsystemet	Patch
@digdir/designsystemet-css	Patch
@digdir/designsystemet-types	Patch
@digdir/designsystemet-web	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

coderabbitai · 2026-05-07T14:22:14Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 144c0654-a5a4-4ea5-b9b4-9c9c46120f95

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/useCheckboxAndRadioGroup-variant

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

Generate code and open pull requests
Plan features and break down work
Investigate incidents and troubleshoot customer tickets together
Automate recurring tasks and respond to alerts with triggers
Summarize progress and report instantly

Built for teams:

Shared memory across your entire org—no repeating context
Per-thread sandboxes to safely plan and execute work
Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-05-07T14:24:47Z

Preview deployments for this pull request:

storybook - 20. May 2026 - 16:03

www - 20. May 2026 - 16:06

mimarz · 2026-05-11T08:02:12Z

Waiting for reviewing this after we finish web-first docs.

Copilot

Pull request overview

Expands the public surface of useCheckboxGroup and useRadioGroup so callers can pass any CheckboxProps/RadioProps (e.g. variant) at the hook level. Those props are then forwarded to every checkbox/radio via getCheckboxProps/getRadioProps. The www stories are updated to use the hooks instead of hand-rolled controlled state, and a Storybook Disabled story is repointed to Group.args.

Changes:

Use MergeRight<CheckboxProps|RadioProps, …> for UseCheckboxGroupProps/UseRadioGroupProps; rebuild a groupProps rest (minus onChange/error) inside the prop getters and spread it before per-element props.
Migrate www checkbox/radio Group/Outline stories from local useState to useCheckboxGroup/useRadioGroup (also fixing a value: 'epost'/'email' mismatch in GroupEn); use the hook's new variant support for the Outline stories.
Internal react package Disabled checkbox story now extends Group.args (matching its render: Group) and a changeset is added.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/react/src/utilities/hooks/use-radio-group/use-radio-group.ts	Switches props type to `MergeRight<RadioProps, …>` and forwards shared props through `getRadioProps`.
packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.ts	Same change for the checkbox-group hook.
packages/react/src/components/checkbox/checkbox.stories.tsx	Repoints `Disabled` story args to `Group.args` to match its renderer.
apps/www/app/content/components/radio/radio.stories.tsx	Rewrites Group/Outline stories to use `useRadioGroup` (incl. `variant: 'outline'`).
apps/www/app/content/components/checkbox/checkbox.stories.tsx	Rewrites Group/Outline stories to use `useCheckboxGroup`; fixes `GroupEn` initial value.
.changeset/fuzzy-zoos-rhyme.md	Patch-level changeset describing the new hook capability.

Comments suppressed due to low confidence (2)

packages/react/src/utilities/hooks/use-radio-group/use-radio-group.ts:120

Inside getRadioProps the new local const { onChange, error, ...rest } = props; shadows the outer-scope onChange/error already destructured at the top of useRadioGroup (lines 83 & 88). It works because they refer to the same underlying values, but the duplication is confusing and the inner onChange/error are immediately discarded. Consider reusing the variables from the outer scope and computing groupProps from props (omitting onChange and error) once at the top of the hook so the intent is clearer. Same comment applies in useCheckboxGroup at lines 161–163.

      if (props) {
        const { onChange, error, ...rest } = props;
        groupProps = rest;
      }

packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.ts:163

groupProps still contains the group-level value (a string[] from the hook's args), and it is spread into the object returned to each checkbox before the explicit value: <string> override later in the same object literal. While property-key ordering currently rescues this (the explicit value wins), passing a string[] as a CheckboxProps['value'] is type-incompatible and the override is easy to break in future edits. Destructure and exclude value (and arguably checked) from groupProps along with onChange and error, so a per-checkbox value is never at risk of being overwritten by an upstream array. The same concern applies in useRadioGroup where the group-level value: string is spread in via ...groupProps before the explicit value override.

      if (props) {
        const { onChange, error, ...rest } = props;
        groupProps = rest;

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

unekinn · 2026-05-20T14:27:47Z

    getRadioProps: (propsOrValue: string | GetRadioProps) => {
-      const props =
+      let groupProps:
+        | Omit<RadioProps, 'aria-label' | 'aria-labelledby'>
+        | undefined;
+      if (props) {
+        const { onChange, error, ...rest } = props;
+        groupProps = rest;
+      }


I think this is a premature optimization. Moving parts of the process out of the getter function makes the code less readable for very little gain

mimarz

Looks fine to me, just need to fix the conflicts before merge.

unekinn · 2026-05-19T07:16:26Z

Looks fine to me, just need to fix the conflicts before merge.

Should we do anything about the comments from Copilot? Some of it does make sense 🤔

mimarz · 2026-05-20T06:37:02Z

Looks fine to me, just need to fix the conflicts before merge.

Should we do anything about the comments from Copilot? Some of it does make sense 🤔

Yeah, we should... Question is do we omit or pick from the components props. This comment raises a potential bug edge-case: #4864 (comment)

useCheckboxGroup

useRadioGroup

caused all three checkboxes to have the same label/description

Copilot

Pull request overview

Copilot reviewed 8 out of 9 changed files in this pull request and generated 3 comments.

unekinn · 2026-05-20T14:25:40Z

Should we do anything about the comments from Copilot? Some of it does make sense 🤔

Yeah, we should... Question is do we omit or pick from the components props. This comment raises a potential bug edge-case: #4864 (comment)

Updated, @mimarz.

Thinking about it, only variant makes a lot of sense to add at the moment. You could argue that data-color and data-size should be included as well, but on the other hand they should probably be set on the fieldset instead?

At least it's easier to add more props later than to remove them 😄

mimarz

LGTM 👍

unekinn requested review from Barsnes, eirikbacker and mimarz as code owners May 7, 2026 14:21

unekinn marked this pull request as draft May 7, 2026 14:22

unekinn changed the title ~~fix(useCheckboxGroup): allow passing props shared by all checkboxes to useCheckboxGroup~~ fix: allow passing props shared by all checkboxes / radios to use...Group hook May 7, 2026

unekinn force-pushed the fix/useCheckboxAndRadioGroup-variant branch 4 times, most recently from 8475238 to 8450f94 Compare May 8, 2026 10:57

unekinn marked this pull request as ready for review May 8, 2026 10:57

mimarz added ✋ on hold labels May 11, 2026

unekinn mentioned this pull request May 13, 2026

feat: update @digdir/* to v1.4.0 Utdanningsdirektoratet/designsystem#756

Merged

mimarz removed the ✋ on hold label May 18, 2026

mimarz requested a review from Copilot May 18, 2026 06:32

Copilot started reviewing on behalf of mimarz May 18, 2026 06:33 View session

Copilot AI reviewed May 18, 2026

View reviewed changes

mimarz reviewed May 19, 2026

View reviewed changes

unekinn added 6 commits May 20, 2026 15:55

fix(useCheckboxGroup): allow passing props shared by all checkboxes to

15550ca

useCheckboxGroup

fix(useRadioGroup): allow passing props shared by all radios to

7221953

useRadioGroup

Add changeset

af801cd

fix checkbox Disabled story extending the wrong base story, which now

0e9e3db

caused all three checkboxes to have the same label/description

Align function signature for useRadioGroup with useCheckboxGroup

bc46938

only expand hook props with variant

55165be

unekinn added 3 commits May 20, 2026 15:59

gitignore .vitest-attachments

47cc0b3

test for passing variant through checkbox/radio group hook

2202497

Update changeset

ab8dc71

unekinn force-pushed the fix/useCheckboxAndRadioGroup-variant branch from 8450f94 to ab8dc71 Compare May 20, 2026 14:01

unekinn requested a review from Copilot May 20, 2026 14:03

Copilot started reviewing on behalf of unekinn May 20, 2026 14:04 View session

Copilot AI reviewed May 20, 2026

View reviewed changes

Comment thread packages/react/src/utilities/hooks/use-radio-group/use-radio-group.test.tsx

Comment thread packages/react/src/utilities/hooks/use-checkbox-group/use-checkbox-group.test.tsx

Comment thread packages/react/src/utilities/hooks/use-radio-group/use-radio-group.ts

unekinn changed the title ~~fix: allow passing props shared by all checkboxes / radios to use...Group hook~~ fix: allow passing variant prop to all checkboxes / radios through use...Group hook May 20, 2026

mimarz approved these changes May 26, 2026

View reviewed changes

mimarz merged commit 0238dff into main May 26, 2026
24 checks passed

mimarz deleted the fix/useCheckboxAndRadioGroup-variant branch May 26, 2026 13:01

github-actions Bot mentioned this pull request May 26, 2026

chore: new release #4891

Merged

Conversation

unekinn commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checks

Uh oh!

changeset-bot Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

github-actions Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mimarz commented May 11, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

unekinn May 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mimarz left a comment

Choose a reason for hiding this comment

Uh oh!

unekinn commented May 19, 2026

Uh oh!

mimarz commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

unekinn commented May 20, 2026

Uh oh!

mimarz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

unekinn commented May 7, 2026 •

edited

Loading

changeset-bot Bot commented May 7, 2026 •

edited

Loading

coderabbitai Bot commented May 7, 2026 •

edited

Loading

github-actions Bot commented May 7, 2026 •

edited

Loading

mimarz commented May 20, 2026 •

edited

Loading