Skip to content

FE-1106: Add CheckboxGroup + RadioGroup to DS#8923

Open
alex-e-leon wants to merge 8 commits into
mainfrom
FE-1106-add-checkbox-radio-group-to-ds
Open

FE-1106: Add CheckboxGroup + RadioGroup to DS#8923
alex-e-leon wants to merge 8 commits into
mainfrom
FE-1106-add-checkbox-radio-group-to-ds

Conversation

@alex-e-leon

@alex-e-leon alex-e-leon commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

🌟 What is the purpose of this PR?

Added CheckboxGroup and RadioGroup to the design system.

I also upgraded ark-ui, as the previous version did not support some fields on radio group that we use like "required". Upgrading also fixes some existing minor issues I noticed (like menu's closing during some hover operations), and will be required anyway for some upcoming components like DateInput.

I've read through the ark-ui changelog, and tested the DS, petrinaut + the hash frontend to make sure that no breaking changes apply to our ark-ui usage.

Including @CiaranMn + @kube in this PR in case you have any concerns with the ark-ui upgrade.

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

  • does not modify any publishable blocks or libraries, or modifications do not need publishing

📜 Does this require a change to the docs?

The changes in this PR:

  • are internal and do not require a docs change

@alex-e-leon alex-e-leon requested review from CiaranMn, kube and lunelson July 1, 2026 10:59
@vercel

vercel Bot commented Jul 1, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hash Ready Ready Preview, Comment Jul 1, 2026 11:31am
hashdotdesign-tokens Ready Ready Preview, Comment Jul 1, 2026 11:31am
petrinaut Ready Ready Preview, Comment Jul 1, 2026 11:31am

@cursor

cursor Bot commented Jul 1, 2026

Copy link
Copy Markdown

PR Summary

Medium Risk
RadioGroup is a breaking public API change for @hashintel/ds-components consumers, and the ark-ui minor-version jump affects all Ark-based primitives repo-wide; Checkbox/Radio no longer auto-link to FormField labels via context unless callers pass htmlForId.

Overview
Adds CheckboxGroup to @hashintel/ds-components and replaces RadioGroup with a new implementation aligned with Checkbox/Radio, plus bumps @ark-ui/react from 5.26.2 to 5.37.2 in the DS, hash-frontend, and petrinaut.

CheckboxGroup is a controlled multi-select built on Ark’s checkbox group: items + value/onChange, shared layout (block, inline, blockWithBorder) and size, optional maxSelectable (unchecked options disable at the cap), and group required / invalid (including a native “pick at least one” pattern). Checkbox gains htmlValue for grouped form posts; it no longer falls back to useFieldId—only explicit htmlForId wires the hidden input id.

RadioGroup drops the legacy options / onValueChange / defaultValue / variant (incl. card) API in favor of items, value/onChange, the same layouts/sizes via radio-checkbox-group-shared, and Ark RadioGroup.Root with custom Radio children (synced ids for labels/keyboard). Exported RadioGroupOption / RadioGroupProps types are removed from main.ts.

Smaller DS tweaks: left labelPlacement uses justifyContent: space-between; radio unchecked hover and checked-hover styles are adjusted. Ladle stories for both groups document layouts, sizes, and disabled states.

Reviewed by Cursor Bugbot for commit b4fc37f. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions github-actions Bot added area/deps Relates to third-party dependencies (area) area/apps > hash* Affects HASH (a `hash-*` app) area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team area/apps area/apps > hash.design Affects the `hash.design` design site (app) labels Jul 1, 2026

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 3 potential issues.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 47f855f. Configure here.

Comment thread libs/@hashintel/ds-components/src/components/Checkbox/checkbox.tsx
Comment thread libs/@hashintel/ds-components/src/components/CheckboxGroup/checkbox-group.tsx Outdated

@kube kube left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked Petrinaut and did not find any issue. 👍

@alex-e-leon alex-e-leon added this pull request to the merge queue Jul 1, 2026
@kube kube removed this pull request from the merge queue due to a manual request Jul 1, 2026
@kube

kube commented Jul 1, 2026

Copy link
Copy Markdown
Collaborator

I removed from Merge Queue, given it was my approval that triggered it, and I suppose the real review you want is from @lunelson.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/apps > hash.design Affects the `hash.design` design site (app) area/apps > hash* Affects HASH (a `hash-*` app) area/apps area/deps Relates to third-party dependencies (area) area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team

Development

Successfully merging this pull request may close these issues.

2 participants