[Checkbox] Feature enhancements and styling fixes

[ravisuhag]

Summary

Improvements to the Checkbox component. Migrated to Base UI with Group support. Some accessibility and feature enhancements remain.

Completed

• CheckboxGroup component — Implemented using @base-ui/react/checkbox-group with forwardRef
• Add 'use client' directive — Present
• Forward ref — Both CheckboxGroup and CheckboxItem use forwardRef
• Indeterminate state — Supported with dedicated icon
• Disabled state styling — [data-disabled] styles present
• API migration — Fully migrated to @base-ui/react/checkbox

Remaining Improvements

Accessibility

1. No focus-visible ring

The checkbox has no visible focus indicator for keyboard navigation — should add :focus-visible outline in checkbox.module.css.

2. No readOnly styling

Base UI supports readOnly and adds data-readonly, but the CSS has no corresponding rule.

3. No required / invalid styling

No CSS for data-required or data-invalid states for form validation.

4. Disabled + checked/indeterminate hover bug

The disabled hover rule resets background to primary, which visually "unchecks" a disabled-checked checkbox on hover.

5. Indeterminate hover has no feedback

The indeterminate hover state has identical styles to non-hover, making hover invisible.

Features

6. No size variants

Fixed size (--rs-space-5 / 16px). Consider adding size variants.

7. Custom icon props (checkedIcon / indeterminateIcon)

Icons are hardcoded with no way to override.

8. Forward parent prop

Base UI supports parent for parent-child checkbox group patterns. Not exposed.

9. Forward inputRef prop

Base UI exposes inputRef for form integration. Not exposed.

10. CheckboxGroup orientation prop

Support orientation="vertical" | "horizontal" for layout control.

Moved to Cross-Cutting Issues

The following items have been moved to cross-cutting issues that address them across all components:

• TypeScript strictness (TypeScript strictness: eliminate any, @ts-ignore, and export prop types #675)
• Consistent focus-visible ring styles (Consistent focus-visible ring styles #681)
• Standardize disabled state styling (Standardize disabled state styling #680)

Files

• packages/raystack/components/checkbox/

[rohanchkrabrty]

1. No focus-visible ring

This is part of cross cutting issue

7. Custom icon props (checkedIcon / indeterminateIcon)

We can use therender prop to customise this, which can be either a reactnode or a function that renders icon based on state

8. Forward parent prop
9. Forward inputRef prop

Both are exposed, they are just not documented in our docs

[ravisuhag]

@rohanchkrabrty Let's make sure we update the docs as well.