Checkbox

Controlled and uncontrolled checkbox input with shift/meta key detection, used for multi-select in list components.

AI Integration Quick Reference

{
  "component": "CometChatCheckbox",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatCheckbox } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Controlled and uncontrolled checkbox input with shift/meta key detection, used for multi-select in list components.",
  "cssRootClass": ".cometchat-checkbox",
  "primaryOutput": {
    "prop": "onChange",
    "type": "(event: CometChatCheckboxChangeEvent) => void"
  },
  "props": {
    "data": {
      "checked": { "type": "boolean", "default": "undefined", "note": "Controlled mode" },
      "defaultChecked": { "type": "boolean", "default": "false", "note": "Uncontrolled mode" },
      "label": { "type": "string", "default": "undefined" },
      "disabled": { "type": "boolean", "default": "false" }
    },
    "callbacks": {
      "onChange": "(event: CometChatCheckboxChangeEvent) => void"
    }
  },
  "events": [],
  "sdkListeners": [],
  "types": {
    "CometChatCheckboxChangeEvent": {
      "checked": "boolean",
      "label": "string | undefined",
      "shiftKey": "boolean | undefined",
      "metaKey": "boolean | undefined"
    }
  }
}

Where It Fits

CometChatCheckbox is a base input component used by list components (CometChatConversations, CometChatUsers, CometChatGroups, CometChatGroupMembers) in their trailing view when selectionMode is set to multiple. It supports both controlled and uncontrolled modes and captures shift/meta key modifiers for range-select behavior.

import { useState } from "react";
import { CometChatCheckbox } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function SelectableList() {
  const [selected, setSelected] = useState<Set<string>>(new Set());

  const items = ["item-1", "item-2", "item-3"];

  return (
    <ul>
      {items.map((id) => (
        <li key={id} style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <CometChatCheckbox
            checked={selected.has(id)}
            label={id}
            onChange={({ checked, shiftKey }) => {
              setSelected((prev) => {
                const next = new Set(prev);
                checked ? next.add(id) : next.delete(id);
                return next;
              });
            }}
          />
        </li>
      ))}
    </ul>
  );
}

---

Minimal Render

import { CometChatCheckbox } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function CheckboxDemo() {
  return <CometChatCheckbox />;
}

export default CheckboxDemo;

Root CSS class: .cometchat-checkbox

---

Actions and Events

Callback Props

onChange

Fires when the checkbox value changes. The payload includes the new checked state, the label text (if provided), and whether shift/meta keys were held during the click.

import { CometChatCheckbox } from "@cometchat/chat-uikit-react";

function CheckboxWithHandler() {
  return (
    <CometChatCheckbox
      label="Select"
      onChange={({ checked, shiftKey, metaKey }) => {
        console.log("Checked:", checked, "Shift:", shiftKey, "Meta:", metaKey);
      }}
    />
  );
}

The shiftKey and metaKey fields enable range-select and multi-select patterns in list components.

---

Common Patterns

Controlled checkbox

import { useState } from "react";
import { CometChatCheckbox } from "@cometchat/chat-uikit-react";

function ControlledCheckbox() {
  const [checked, setChecked] = useState(false);
  return (
    <CometChatCheckbox
      checked={checked}
      label="Accept terms"
      onChange={({ checked: c }) => setChecked(c)}
    />
  );
}

Uncontrolled checkbox

import { CometChatCheckbox } from "@cometchat/chat-uikit-react";

function UncontrolledCheckbox() {
  return (
    <CometChatCheckbox
      defaultChecked
      label="Subscribe to newsletter"
      onChange={({ checked }) => console.log(checked)}
    />
  );
}

Disabled states

import { CometChatCheckbox } from "@cometchat/chat-uikit-react";

function DisabledCheckboxes() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <CometChatCheckbox label="Disabled unchecked" disabled />
      <CometChatCheckbox label="Disabled checked" checked disabled />
    </div>
  );
}

---

CSS Architecture

The component uses CSS custom properties (design tokens) defined in @cometchat/chat-uikit-react/css-variables.css. The cascade:

1. Global tokens set on the .cometchat root wrapper.
2. Component CSS (.cometchat-checkbox) consumes these tokens via var().
3. Overrides target .cometchat-checkbox descendant selectors.

Key Selectors

Target	Selector
Root	.cometchat-checkbox
Label wrapper	.cometchat-checkbox__label
Native input (hidden)	.cometchat-checkbox__input
Custom checkmark	.cometchat-checkbox__checkmark
Label text	.cometchat-checkbox__text
Disabled state	.cometchat-checkbox--disabled

Example: Brand-themed checkbox

.cometchat .cometchat-checkbox .cometchat-checkbox__checkmark {
  border-radius: 50%;
}

.cometchat .cometchat-checkbox input:checked + .cometchat-checkbox__checkmark {
  background-color: #f76808;
  border-color: #f76808;
}

Customization Matrix

What to change	Where	Property/API	Example
Handle state changes	Component props	onChange callback	onChange={({ checked }) => ...}
Set initial state	Component props	checked / defaultChecked	checked={true}
Add label text	Component props	label	label="Select all"
Disable interaction	Component props	disabled	disabled={true}
Change colors, shape	Global CSS	.cometchat-checkbox selectors	See example above

---

Props

All props are optional.

---

checked

Controls the checkbox state (controlled mode). When provided, the component does not manage its own state.

Type	boolean
Default	undefined

---

className

Custom CSS class applied to the root element.

Type	string
Default	undefined

---

defaultChecked

Initial checked state (uncontrolled mode). Ignored when checked is provided.

Type	boolean
Default	false

---

disabled

Disables the checkbox. Prevents interaction and applies reduced opacity.

Type	boolean
Default	false

---

label

Text displayed next to the checkbox.

Type	string
Default	undefined

When omitted, the checkbox renders without visible text and uses aria-label="checkbox" for accessibility.

---

onChange

Callback fired when the checkbox value changes.

Type	(event: CometChatCheckboxChangeEvent) => void
Default	undefined

interface CometChatCheckboxChangeEvent {
  checked: boolean;
  label?: string;
  shiftKey?: boolean;
  metaKey?: boolean;
}

---

CSS Selectors

Target	Selector
Root	.cometchat-checkbox
Disabled root	.cometchat-checkbox--disabled
Label wrapper	.cometchat-checkbox__label
Native input	.cometchat-checkbox__input
Custom checkmark	.cometchat-checkbox__checkmark
Checked checkmark	.cometchat-checkbox__input:checked + .cometchat-checkbox__checkmark
Focus ring	.cometchat-checkbox__input:focus-visible + .cometchat-checkbox__checkmark
Tick icon	.cometchat-checkbox__checkmark::after
Label text	.cometchat-checkbox__text