Checkbox

Overview

Checkbox is the shared checkbox control used across the platform for:

• DataTable selection
• row selection
• permission toggles
• multi-select lists
• partial or indeterminate selection state

It wraps CheckboxPrimitive and adds optional label support.

DataTable Selection Pattern

One of the most important Checkbox patterns in the system is DataTable selection.

The same control is used for:

• top-level select-all
• group-level select-all
• individual row selection
• disabled placeholder cells in skeleton and non-interactive states

<Checkbox
  checked={isTopLevelChecked}
  onChange={handleTopLevelCheckboxClick}
/>

In practice, this is one of the clearest reference implementations for how Checkbox behaves across list-heavy dashboard UI.

Basic Usage

<Checkbox
  label="Allow attendees to invite others"
  checked={value}
  onChange={onChange}
/>

Partial Checked State

Use partialChecked for select-all controls when some, but not all, child items are selected.

<Checkbox
  partialChecked={selectedConversationIds.length > 0}
  checked={conversations.every((c) => selectedConversationIds.includes(c.id))}
  onChange={handleToggleAll}
/>

This is the pattern used in ChatOverview.tsx.

Inside Clickable Rows

By default, the checkbox prevents click propagation. Use allowPropagation only when the parent row also needs the event.

<Checkbox
  checked={isSelected}
  onChange={onSelectionChange}
  allowPropagation
/>

Props

Checkbox Primitive

CheckboxPrimitive is the low-level control used internally by Checkbox.

Use it directly only when you need a custom row or card layout without the standard label wrapper. In normal product code, prefer Checkbox.

Brand Dashboard Usage

Choosing Between Checkbox, Toggle, And Radio

• Use Checkbox for membership in a set or multiple independent true/false options.
• Use Toggle for a single on/off setting.
• Use Radio when only one option may be chosen.

Guidelines

• Do use partialChecked for select-all or hierarchical selection UI
• Do look at DataTable first when you need a canonical checkbox selection pattern
• Do use allowPropagation only when the checkbox lives inside another clickable surface
• Do prefer Checkbox over Toggle for multi-select lists
• Don't use Checkbox when the interaction is really a mutually exclusive choice