Radio Button - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatRadioButton",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatRadioButton } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Controlled and uncontrolled radio button input for single-selection within a group, used in poll bubbles and option lists.",
  "cssRootClass": ".cometchat-radio-button",
  "primaryOutput": {
    "prop": "onChange",
    "type": "(event: CometChatRadioButtonChangeEvent) => void"
  },
  "props": {
    "data": {
      "checked": { "type": "boolean", "default": "undefined", "note": "Controlled mode" },
      "defaultChecked": { "type": "boolean", "default": "false", "note": "Uncontrolled mode" },
      "label": { "type": "string", "default": "undefined" },
      "name": { "type": "string", "default": "undefined", "note": "Groups radio buttons" },
      "value": { "type": "string", "default": "undefined" },
      "disabled": { "type": "boolean", "default": "false" },
      "ariaLabel": { "type": "string", "default": "undefined" }
    },
    "callbacks": {
      "onChange": "(event: CometChatRadioButtonChangeEvent) => void"
    }
  },
  "events": [],
  "sdkListeners": [],
  "types": {
    "CometChatRadioButtonChangeEvent": {
      "checked": "boolean",
      "label": "string | undefined",
      "value": "string | undefined"
    }
  }
}

Where It Fits

CometChatRadioButton is a base input component used for single-selection scenarios. It is primarily used by CometChatPollBubble for poll option selection. Radio buttons sharing the same name attribute form a group where only one can be selected at a time — this is handled natively by the browser.

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

function PollOptions() {
  const [selected, setSelected] = useState("option-1");

  const options = [
    { id: "option-1", text: "React" },
    { id: "option-2", text: "Vue" },
    { id: "option-3", text: "Angular" },
  ];

  return (
    <div role="radiogroup" aria-label="Favorite framework">
      {options.map((option) => (
        <CometChatRadioButton
          key={option.id}
          name="poll"
          value={option.id}
          label={option.text}
          checked={selected === option.id}
          onChange={({ value }) => value && setSelected(value)}
        />
      ))}
    </div>
  );
}

Minimal Render

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

function RadioButtonDemo() {
  return <CometChatRadioButton label="Option 1" name="demo" value="1" />;
}

export default RadioButtonDemo;

Root CSS class: .cometchat-radio-button

Actions and Events

Callback Props

onChange

Fires when the radio button is selected. The payload includes the new checked state, the label text, and the value.

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

function RadioButtonWithHandler() {
  return (
    <CometChatRadioButton
      label="Option A"
      name="group"
      value="a"
      onChange={({ checked, value }) => {
        console.log("Checked:", checked, "Value:", value);
      }}
    />
  );
}

Common Patterns

Controlled radio group

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

function ControlledRadioGroup() {
  const [selected, setSelected] = useState("a");
  return (
    <div role="radiogroup" aria-label="Options">
      <CometChatRadioButton
        name="group"
        value="a"
        label="Option A"
        checked={selected === "a"}
        onChange={() => setSelected("a")}
      />
      <CometChatRadioButton
        name="group"
        value="b"
        label="Option B"
        checked={selected === "b"}
        onChange={() => setSelected("b")}
      />
      <CometChatRadioButton
        name="group"
        value="c"
        label="Option C"
        checked={selected === "c"}
        onChange={() => setSelected("c")}
      />
    </div>
  );
}

Uncontrolled radio button

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

function UncontrolledRadio() {
  return (
    <CometChatRadioButton
      defaultChecked
      label="Pre-selected"
      name="uncontrolled"
      value="pre"
      onChange={({ checked }) => console.log(checked)}
    />
  );
}

Disabled states

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

function DisabledRadioButtons() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <CometChatRadioButton label="Disabled unchecked" name="dis-1" value="a" disabled />
      <CometChatRadioButton label="Disabled checked" name="dis-2" value="b" checked disabled />
    </div>
  );
}

CSS Architecture

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

Global tokens set on the .cometchat root wrapper.
Component CSS (.cometchat-radio-button) consumes these tokens via var().
Overrides target .cometchat-radio-button descendant selectors.

Key Selectors

Target	Selector
Root	`.cometchat-radio-button`
Label wrapper	`.cometchat-radio-button__label`
Native input (hidden)	`.cometchat-radio-button__input`
Custom radio circle	`.cometchat-radio-button__custom`
Label text	`.cometchat-radio-button__text`
Disabled state	`.cometchat-radio-button--disabled`

Example: Brand-themed radio button

.cometchat .cometchat-radio-button input:checked + .cometchat-radio-button__custom {
  border-color: #f76808;
}

.cometchat .cometchat-radio-button .cometchat-radio-button__custom::after {
  background-color: #f76808;
}

Customization Matrix

What to change	Where	Property/API	Example
Handle selection	Component props	`onChange` callback	`onChange={({ value }) => ...}`
Set selected state	Component props	`checked` / `defaultChecked`	`checked={true}`
Add label text	Component props	`label`	`label="Option A"`
Group radio buttons	Component props	`name`	`name="poll-options"`
Set value	Component props	`value`	`value="option-1"`
Disable interaction	Component props	`disabled`	`disabled={true}`
Override accessibility label	Component props	`ariaLabel`	`ariaLabel="Custom label"`
Change colors, size	Global CSS	`.cometchat-radio-button` selectors	See example above

Props

All props are optional.

ariaLabel

Custom aria-label that overrides label for accessibility. Useful when the visual label differs from the accessible name.


Type	`string`
Default	`undefined`

checked

Controls the radio button 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 radio button. Prevents interaction and applies reduced opacity.


Type	`boolean`
Default	`false`

label

Text displayed next to the radio button.


Type	`string`
Default	`undefined`

When omitted, the radio button renders without visible text. Provide ariaLabel for accessibility in this case.

name

Groups radio buttons together. Only one radio button with the same name can be selected at a time. This is standard HTML radio button behavior.


Type	`string`
Default	`undefined`

onChange

Callback fired when the radio button is selected.


Type	`(event: CometChatRadioButtonChangeEvent) => void`
Default	`undefined`

interface CometChatRadioButtonChangeEvent {
  checked: boolean;
  label?: string;
  value?: string;
}

value

The value associated with this radio button, included in the onChange payload.


Type	`string`
Default	`undefined`

CSS Selectors

Target	Selector
Root	`.cometchat-radio-button`
Disabled root	`.cometchat-radio-button--disabled`
Label wrapper	`.cometchat-radio-button__label`
Native input	`.cometchat-radio-button__input`
Custom radio circle	`.cometchat-radio-button__custom`
Checked border	`.cometchat-radio-button__input:checked + .cometchat-radio-button__custom`
Inner filled circle	`.cometchat-radio-button__custom::after`
Checked inner circle	`.cometchat-radio-button__input:checked + .cometchat-radio-button__custom::after`
Focus ring	`.cometchat-radio-button__input:focus-visible + .cometchat-radio-button__custom`
Label text	`.cometchat-radio-button__text`

Documentation Index

​Where It Fits

​Minimal Render

​Actions and Events

​Callback Props

​onChange

​Common Patterns

​Controlled radio group

​Uncontrolled radio button

​Disabled states

​CSS Architecture

​Key Selectors

​Example: Brand-themed radio button

​Customization Matrix

​Props

​ariaLabel

​checked

​className

​defaultChecked

​disabled

​label

​name

​onChange

​value

​CSS Selectors

Where It Fits

Minimal Render

Actions and Events

Callback Props

onChange

Common Patterns

Controlled radio group

Uncontrolled radio button

Disabled states

CSS Architecture

Key Selectors

Example: Brand-themed radio button

Customization Matrix

Props

ariaLabel

checked

className

defaultChecked

disabled

label

name

onChange

value

CSS Selectors