feat(Checkbox): indeterminate checkboxes by dreamwasp · Pull Request #3123 · Codecademy/gamut

dreamwasp · 2025-06-26T21:00:21Z

Overview

Adds an indeterminate state to Checkbox

I structured these based on guidance from Mark to use a native checkbox instead of using aria-checked.

PR Checklist

Related to designs: gm-1187
Related to JIRA ticket: [gm-1187]
I have run this code to verify it works
This PR includes unit tests for the code change
This PR includes testing instructions tests for the code change
The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Go to Checkbox story
Checkout the new docs
Put on VO and hear the checkbox being announced as indeterminate
Check out the branch locally and test the new types (checked + indeterminate cannot be true at the same time)

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

nx-cloud · 2025-06-26T21:01:08Z

View your CI Pipeline Execution ↗ for commit 8a51bd3

☁️ Nx Cloud last updated this comment at 2025-07-11 14:33:43 UTC

…gm-1187

LinKCoding

This looks great, I left some thoughts/suggestions, mostly around SB stuff.

I looked over the stories and VO sounds great!

LinKCoding · 2025-07-09T15:24:33Z

packages/gamut/src/Form/__tests__/Checkbox.test.tsx


    expect(onChange).toHaveBeenCalled();
  });
+  it('sets the input indeterminate state when the prop is passed', () => {


Would it help to also check that checked is also false (or !true? falsey?) here when indeterminate is true?

E.g. as a safeguard in case types get changed?

LinKCoding · 2025-07-09T15:41:56Z

packages/gamut/src/Form/inputs/Checkbox.tsx

 import { BaseInputProps } from '../types';
+import { CheckboxCheckedUnion, CheckboxLabelUnion } from './types';

+/** Something will happen here */


Leftover comment

LinKCoding · 2025-07-09T16:15:38Z

packages/gamut/src/Form/inputs/Checkbox.tsx

+    function syncedRefs(element: HTMLInputElement | null) {
+      intRef.current = element;
+      if (ref) {
+        if (typeof ref === 'object') {
+          ref.current = element;
+        } else {
+          ref(element);
+        }
+      }
+    }


Q: when would ref be passed in as a function?

callback refs are sometimes used in animations and other things - here's some react official docs with fancy examples: Manipulating the DOM with Refs

LinKCoding · 2025-07-09T17:45:59Z

packages/styleguide/src/lib/Atoms/FormInputs/Checkbox/Checkbox.stories.tsx

  );
 };
+
+const NestedCheckboxExample: React.FC = () => {


if you export this (and update its name to NestedCheckboxes or whatever the .mdx file expects)

You can have the code inside the "Show code" box, e.g.

That way you don't need to add the code snippet after this canvas

packages/styleguide/src/lib/Atoms/FormInputs/Checkbox/Checkbox.mdx

LinKCoding · 2025-07-09T17:50:37Z

packages/styleguide/src/lib/Atoms/FormInputs/Checkbox/Checkbox.mdx

+
+<Canvas of={CheckboxStories.NestedCheckboxes} />
+
+```tsx


see comment on exporting the example directly — but I don't think you need to add this

LinKCoding · 2025-07-09T17:56:00Z

packages/styleguide/src/lib/Atoms/FormInputs/Checkbox/Checkbox.mdx

+
+<Canvas of={CheckboxStories.Indeterminate} />
+
+`indeterminate` is used for Checkboxes that are the header of a list of checkboxes. When clicked, all of its child checkboxes should be selected or unselected. Clicking on only some of the child checkboxes should make the header checkbox show the indeterminate state.


indeterminate is used for Checkboxes that are the header of a list of checkboxes.

I think calling the parent a "header" might be confusing — maybe sticking with "parent" and "nested" like in your example works. Something like:

indeterminate is used for a Checkbox that is the parent of a list of checkboxes.
or GPT has this suggestion:

indeterminate is used for a parent Checkbox that represents the combined state of a group of nested checkboxes.

When clicked, all of its child checkboxes should be selected or unselected. Clicking on only some of the child checkboxes should make the header checkbox show the indeterminate state.

Maybe: "When the parent checkbox is checked or blank, all of its child checkboxes should be selected or unselected, respectively. The indeterminate state is shown when only some of the child checkboxes are checked."

packages/styleguide/src/lib/Atoms/FormInputs/Checkbox/Checkbox.mdx

….mdx Co-authored-by: Kenny Lin <kenny.lin.91@gmail.com>

codecademydev · 2025-07-11T14:33:48Z

🚀 Styleguide deploy preview ready!

https://687120c6da19cdff71d8ada1--gamut-preview.netlify.app

Deploy Logs

codecademydev · 2025-07-11T14:34:00Z

📬Published Alpha Packages:

@codecademy/gamut@65.1.0-alpha.8a51bd.0
@codecademy/gamut-kit@0.6.521-alpha.8a51bd.0
@codecademy/styleguide@76.0.2-alpha.8a51bd.0

feat(Checkbox): indeterminate checkboxes

f4f4743

dreamwasp and others added 10 commits June 27, 2025 16:36

sorted discriminated unions + animations

b4758d1

work done

37f70e5

swap checked prop to active in styles

c45c48e

checkbox documentation

e0b3d13

changes to story + fix

84924d3

add indeterminate tests

94496e4

Merge branch 'main' into cass-gm-1187

03a03b2

fix background color overlap issues

c91c454

Merge branch 'cass-gm-1187' of github.com:Codecademy/gamut into cass-…

d53f887

…gm-1187

build

cb72235

dreamwasp marked this pull request as ready for review July 8, 2025 12:46

dreamwasp requested a review from a team as a code owner July 8, 2025 12:46

dreamwasp requested review from LinKCoding and jakemhiller July 8, 2025 12:46

Merge branch 'main' into cass-gm-1187

e36a69a

LinKCoding approved these changes Jul 9, 2025

View reviewed changes

dreamwasp and others added 5 commits July 9, 2025 14:44

Update packages/styleguide/src/lib/Atoms/FormInputs/Checkbox/Checkbox…

a33965d

….mdx Co-authored-by: Kenny Lin <kenny.lin.91@gmail.com>

Update packages/styleguide/src/lib/Atoms/FormInputs/Checkbox/Checkbox…

076f3a6

….mdx Co-authored-by: Kenny Lin <kenny.lin.91@gmail.com>

kenny comments

cde8a2b

Merge branch 'main' into cass-gm-1187

a5137e5

final doc changes

8a51bd3

dreamwasp added the Ship It Ready 2 ship label Jul 11, 2025

codecademydev merged commit 66ab4f7 into main Jul 11, 2025
21 of 22 checks passed

codecademydev removed the Ship It Ready 2 ship label Jul 11, 2025

codecademydev deleted the cass-gm-1187 branch July 11, 2025 14:39


		<Canvas of={CheckboxStories.Indeterminate} />

		`indeterminate` is used for Checkboxes that are the header of a list of checkboxes. When clicked, all of its child checkboxes should be selected or unselected. Clicking on only some of the child checkboxes should make the header checkbox show the indeterminate state.

Conversation

dreamwasp commented Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

PR Links and Envs

Uh oh!

nx-cloud bot commented Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecademydev commented Jul 11, 2025

Uh oh!

codecademydev commented Jul 11, 2025

📬Published Alpha Packages:

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dreamwasp commented Jun 26, 2025 •

edited

Loading

nx-cloud bot commented Jun 26, 2025 •

edited

Loading