[Checkbox Group] Parent checkbox API suggestion

[vladmoroz]

I've found that the relationship between <Checkbox parent> and <CheckboxGroup allValues={...}> isn't obvious/easily memorable. You need to maintain in your head that two props on separate components are needed to make it work.

My proposal, instead of:

<CheckboxGroup allValues={['a', 'b', 'c']} value={['a']} onValueChange={...}>
  <Checkbox.Root parent>
    <Checkbox.Indicator />
  </Checkbox.Root>

  <Checkbox.Root name="a">
    <Checkbox.Indicator />
  </Checkbox.Root>

  <Checkbox.Root name="b">
    <Checkbox.Indicator />
  </Checkbox.Root>

  <Checkbox.Root name="c">
    <Checkbox.Indicator />
  </Checkbox.Root>
</CheckboxGroup>

Set child names on the parent checkbox directly via a group prop:

<CheckboxGroup value={["a"]} onValueChange={...}>
  <Checkbox.Root group={['a', 'b', 'c']} >
    <Checkbox.Indicator />
  </Checkbox.Root>

  <Checkbox.Root name="a">
    <Checkbox.Indicator />
  </Checkbox.Root>

  <Checkbox.Root name="b">
    <Checkbox.Indicator />
  </Checkbox.Root>

  <Checkbox.Root name="c">
    <Checkbox.Indicator />
  </Checkbox.Root>
</CheckboxGroup>

CheckboxGroup would pass down the current group value to the parent checkbox which then would be responsible for rendering itself as ticked/unticked/indeterminate, and the group prop is memorable because of its relationship to CheckboxGroup. Also, one fewer prop to have in the API.

I thought about groupValues too, but decided that I'm not a fan of how the values part misleads you in thinking that you might need to set a value on the child checkboxes instead of the name prop; also, group is shorter and feels somewhat more declarative

Search keywords:

[mj12albert]

IIRC the reason for this is that putting allValues={['a', 'b', 'c']} (by any name) one level higher than <Checkbox.Root name="a"> is necessary to SSR the checked state correctly

(I think if it weren't for this, the group value could even just be derived from the names of the individual checkboxes instead of being a prop)

[vladmoroz]

IIRC the reason for this is that putting allValues={['a', 'b', 'c']} (by any name) one level higher than <Checkbox.Root name="a"> is necessary to SSR the checked state correctly

(I think if it weren't for this, the group value could even just be derived from the names of the individual checkboxes instead of being a prop)

A <Checkbox> with group prop could still read the current value from the parent <CheckboxGroup> context even when rendering on the server, no?

[atomiks]

Checkbox.Root needs to read allValues, but if this is via a prop like group it may be able to still work with some implementation changes of how children checkboxes receive getChildProps