`Checkbox` is a flexible, accessible component for binary and mixed (indeterminate) selection states.

Features:

- Controlled component: requires `value` and `onChange` for state management - Supports three states: checked, unchecked, and mixed (indeterminate) - Multiple visual variants: default, accent, outline - Disabled and focused states for accessibility and usability - Two label approaches: simple string children or explicit `<Checkbox.Label>` for complex content - Can be grouped for multi-select scenarios

Usage:

- Use for toggling settings, selecting items, or multi-select lists - Use the mixed state for parent checkboxes representing a partially selected group - Combine with labels for clarity and accessibility - Simple labels: `<Checkbox>Label text</Checkbox>` - Complex labels: `<Checkbox><Checkbox.Label>Complex content</Checkbox.Label></Checkbox>`

Best Practices:

- Always provide a visible label (string or `<Checkbox.Label>`) - Use simple string children for basic labels - Use `<Checkbox.Label>` for labels with formatting or complex content - Use the controlled pattern for predictable state management - Clearly indicate disabled and mixed states - Group related checkboxes for multi-select scenarios

Accessibility:

- Fully accessible to screen readers and keyboard users - Properly associates label and input for assistive technology - Mixed state is announced to screen readers Basic: Demonstrates all variants, states, and interaction states of the Checkbox component. - Shows default, accent, and outline variants. - Demonstrates rest, focused, and disabled states. - Shows checked, unchecked, and mixed (indeterminate) states. - Use as a reference for all visual and interaction possibilities.

Disabled: Demonstrates a disabled Checkbox.

- Shows how to render a Checkbox that cannot be interacted with. - Useful for indicating unavailable options.

Variant: Demonstrates the different visual variants of the Checkbox component.

- Shows default, accent, and outline variants side by side. - Useful for previewing and choosing the right style for your UI.

Group: Demonstrates a group of Checkboxes for multi-select scenarios.

- Shows how to manage a group of checkboxes with independent state. - Useful for forms, filters, and option lists.

Label Usage: Demonstrates two ways to use labels with Checkbox.

- Simple string children: automatically wrapped with Checkbox.Label - Explicit Checkbox.Label: for more complex label content