Feature Request: Checkbox Group

[huntabyte]

We should implement a CheckboxGroup component to handle multiple checkbox selections. This component would the state of multiple Checkboxs.

Core Functionality

The CheckboxGroup would manage an array of selected values internally

• Child Checkbox.Root components would automatically integrate with their parent CheckboxGroup
• Values would be added/removed from the group's value array when checkboxes are checked/unchecked
• The group would handle proper ARIA attributes for accessibility

API Options

Option A

This feels a bit weird because the Group would end up wrapping the root if we added it to the Checkbox namespace:

<script>
	import { Checkbox } from 'bits-ui'
</script>

<Checkbox.Group 
  values={['option1']} 
  onValuesChange={(values) => console.log(values)}
>
  <Checkbox.Root value="option1">Option 1</Checkbox>
  <Checkbox.Root value="option2">Option 2</Checkbox>
  <Checkbox.Root value="option3">Option 3</Checkbox>
</Checkbox.Group>

Option B

Be the first component to violate the name-space API:

<script>
	import { Checkbox, CheckboxGroup } from 'bits-ui'
</script>

<CheckboxGroup 
  values={['option1']} 
  onValuesChange={(values) => console.log(values)}
>
  <Checkbox.Root value="option1">Option 1</Checkbox>
  <Checkbox.Root value="option2">Option 2</Checkbox>
  <Checkbox.Root value="option3">Option 3</Checkbox>
</CheckboxGroup>

This raises the question of if we want to drop the namespacing for components that have only a single component within their suite. On one hand, it feels appropriate, and on the other hand, by doing so, we eliminate the ability to introduce other ideas like Option A in the future without a break.

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

No response

[gurpreetatwal]

I personally like the "cleanliness" of dropping the namespacing, but I see the issue with it making future changes harder.

For option A, what about the following instead? CheckboxGroup.Item would basically be an alias for / to Checkbox.Root

<script>
	import { CheckboxGroup} from 'bits-ui'
</script>

<CheckboxGroup.Root 
  values={['option1']} 
  onValuesChange={(values) => console.log(values)}
>
  <CheckboxGroup.Item value="option1">Option 1</CheckboxGroup.Item>
  <CheckboxGroup.Item value="option2">Option 2</CheckboxGroup.Item>
  <CheckboxGroup.Item value="option3">Option 3</CheckboxGroup.Item>
</Checkbox.Group>

[huntabyte]

This could work @gurpreetatwal, but I imagine people are creating their own custom checkbox components, so I don't want to misrepresent the fact that they are the same exact thing.

[gurpreetatwal]

Ah okay, that makes sense. I'd say to go to with option A for consistency unless you're planning on dropping the "namepsace" API in general (e.g. future breaking release may make Checkbox.Root just Checkbox)

Another alternative for option A would be to rename Checkbox.Root to Checkbox.Item (or Checkbox.Box, etc.) but leave Checkbox.Root as a deprecated alias until the next major