fix: allow passing props shared by all checkboxes / radios to use...Group hook by unekinn · Pull Request #4864 · digdir/designsystemet

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

Summary

useCheckboxGroup and useRadioGroup: these hooks now accept all CheckboxProps / RadioProps that don't conflict with the hooks' own props. This can be used to easily set common props like 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: 8450f94

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 - 8. May 2026 - 12:59

www - 8. May 2026 - 13:02

useCheckboxGroup

useRadioGroup

caused all three checkboxes to have the same label/description

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.

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


+export type UseCheckboxGroupProps = MergeRight<
+  CheckboxProps,
+  {
+    /**
+     * Disables all checkboxes in the group.
+     */
+    disabled?: boolean;
+    /**
+     * Error message for the group.
+     * If set, all checkboxes will have `aria-invalid` set to `true`.
+     */
+    error?: ReactNode;
+    /**
+     * Name of the group.
+     * If not set, a random id will be generated.
+     */
+    name?: string;
+    /**
+     * Makes all checkboxes in the group read-only.
+     * If set, all checkboxes will have `aria-readonly` set to `true`.
+     */
+    readOnly?: boolean;
+    /**
+     * Initial value of the group
+     * @default []
+     */
+    value?: string[];
+    /**
+     * Makes all checkboxes in the group required.
+     * If set, all checkboxes will have `required` set to `true`.
+     */
+    required?: boolean;
+    /**
+     * Callback that is called when the value of the group changes.
+     * @param nextValue string[]
+     * @param currentValue string[]
+     * @returns void
+     */
+    onChange?: (nextValue: string[], currentValue: string[]) => void;
+  }
+>;


+export function useRadioGroup(props?: UseRadioGroupProps): useRadioGroupReturn {
+  const {
+    error,
+    readOnly,
+    required,
+    disabled,
+    name,
+    onChange,
+    value: initialValue = '',
+  } = props || {};


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 🤔

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 2 times, most recently from b2c0757 to 3a378d2 Compare May 8, 2026 10:11

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

cea8490

useCheckboxGroup

unekinn force-pushed the fix/useCheckboxAndRadioGroup-variant branch from 3a378d2 to dea8d73 Compare May 8, 2026 10:11

unekinn added 4 commits May 8, 2026 12:55

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

edd689d

useRadioGroup

Add changeset

af9d762

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

0bdf684

caused all three checkboxes to have the same label/description

Align function signature for useRadioGroup with useCheckboxGroup

8450f94

unekinn force-pushed the fix/useCheckboxAndRadioGroup-variant branch 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: allow passing props shared by all checkboxes / radios to use...Group hook#4864

fix: allow passing props shared by all checkboxes / radios to use...Group hook#4864
unekinn wants to merge 5 commits into
mainfrom
fix/useCheckboxAndRadioGroup-variant

unekinn commented May 7, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented May 7, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 7, 2026 •

edited

Loading

Review skipped

Uh oh!

github-actions Bot commented May 7, 2026 •

edited

Loading

Uh oh!

mimarz commented May 11, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

mimarz left a comment

Uh oh!

unekinn commented May 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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!

mimarz left a comment

Choose a reason for hiding this comment

Uh oh!

unekinn commented May 19, 2026

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