feat: Checkbox group component

[Shubhdeep12]

closes #310

• To create Checkbox group component
• To add examples for Checkbox group
• To add docs for Checkbox group
• Tests for Checkbox group [IN-PROGRESS]

[netlify]

👷 Deploy request for kobalte pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	ea44978

[jer3m01]

Thanks for taking time to submit this PR!

However a few changes are needed; most of these components are the same as Checkbox but duplicated and renamed.
These can be re-exported and renamed instead of having a duplicate of each, an example of this can be seen in DropdownMenu which re-exports Menu (example).
This most likely applies to -item-control, -item-description, -item-indicator, -item and -item-label.

For the behavior of the CheckboxGroup.Item it would be better to return a wrapped Checkbox.Root rather than a copy with modified behavior.
I'd suggest inject the group status inside the normal checkbox through checked={checkboxGroupContext.value().includes(<self value>)} and onChange={(checked) => checkboxGroupContext.setSelected(<self value>, checked)} (pseudo code, replace with actual implementation).
Example here.

Also it seems like the HTML forms example is broken.

Let me know if anything needs to be clarified.
Thanks again for the PR.

[Shubhdeep12]

Thanks for the information and review @jer3m01
Yeah I found these issues. Some of them are fixed locally and working on others.
Will update here once this is ready to review.
Thanks.

[Shubhdeep12]

Hi @jer3m01, the component is almost complete. However, I’m stuck on some issues:

1. there are two test cases with a FIXME tag where we're controlling the checkboxes using .ItemControl. It's not working as expected—input.checked isn’t returning true when it should.
2. In the HTML form example, I’m a bit confused. We’re correctly passing the name attribute to each checkbox input, and each one has a different value. Ideally, FormData should return name: [checkedValue1, checkedValue2], but it’s only storing the first checked value

I’d appreciate it if you could take a look and let me know if I missed anything.
thanks