Checkbox

Usage Guidelines:

• Do Use when users can select multiple options from a list (e.g., "Select Sectors: [x] Tech [ ] Healthcare").

• Do Use for single "Opt-in" confirmations (e.g., "I agree to terms").

• Do Not Use for mutually exclusive choices (use Radio Buttons).

• Do Not Use for settings that take immediate effect (use a Toggle).

Anatomy & Properties:

A. The Control (Box)

• Visual: A square container with Radius-XS (4px) to distinguish it from the circular Radio Button.

• Size: Supports Default (20px) and S (16px) to match dense data tables.

B. The Label

• Position: Text label is always aligned to the right of the checkbox.

• Click Target: Clicking the label must toggle the checkbox to ensure accessibility.

States (Checked Property)

The component supports three logical states:

• Unchecked (No): The default state. An empty stroke container.

• Checked (Yes): A solid Brand-Primary fill with a white checkmark icon. Indicates selection.

• Indeterminate (Mixed): Used in parent rows (e.g., in a Tree Table) when only some child items are selected. Visually represented by a horizontal dash (-) instead of a checkmark.

Interaction States

• Default: Border-Neutral-Primary stroke.

• Hover: A subtle halo or darker border color indicates interactivity.

• Focus: A focus ring appears around the box for keyboard navigation.

• Disabled: Opacity is reduced to 50%, and the input is non-interactive.