Create Poll

A modal form for creating poll messages with dynamic answer options, validation, and reply-to-message support.

AI Integration Quick Reference

{
  "component": "CometChatCreatePoll",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatCreatePoll } from \"@cometchat/chat-uikit-react\";",
  "description": "Modal form for creating poll messages with question, dynamic options, and validation.",
  "cssRootClass": ".cometchat-create-poll",
  "props": {
    "data": {
      "user": { "type": "CometChat.User", "default": "undefined" },
      "group": { "type": "CometChat.Group", "default": "undefined" },
      "replyToMessage": { "type": "CometChat.BaseMessage", "default": "undefined" }
    },
    "behavior": {
      "defaultAnswers": { "type": "number", "default": "2" }
    },
    "callbacks": {
      "onClose": { "type": "() => void", "default": "undefined" },
      "onPollCreated": { "type": "() => void", "default": "undefined" },
      "onError": { "type": "(error: unknown) => void", "default": "undefined" }
    },
    "text": {
      "title": { "type": "string", "default": "localized 'Create Poll'" },
      "questionPlaceholderText": { "type": "string", "default": "localized placeholder" },
      "answerPlaceholderText": { "type": "string", "default": "localized placeholder" },
      "answerHelpText": { "type": "string", "default": "localized help text" },
      "addAnswerText": { "type": "string", "default": "localized 'Add Option'" },
      "createPollButtonText": { "type": "string", "default": "localized 'Create'" }
    }
  }
}

Where It Fits

CometChatCreatePoll is a modal dialog opened from the message composer’s attachment menu when the Polls plugin is registered. It creates a poll via CometChat.callExtension('polls', 'POST', 'v2/create', payload).

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

function ChatComposer({ user }) {
  const [showPoll, setShowPoll] = useState(false);
  return (
    <>
      <button onClick={() => setShowPoll(true)}>Create Poll</button>
      {showPoll && (
        <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <CometChatCreatePoll
            user={user}
            onClose={() => setShowPoll(false)}
            onPollCreated={() => setShowPoll(false)}
          />
        </div>
      )}
    </>
  );
}

Minimal Render

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

function Demo() {
  return <CometChatCreatePoll onClose={() => {}} />;
}

Root CSS class: .cometchat-create-poll

Features

• Question input with placeholder text
• Dynamic answer options (add/remove, minimum 2, maximum 12)
• Validation: requires non-empty question and at least 2 non-empty options
• Loading state on the create button during API call
• Error display with role="alert"
• Reply-to-message support via quotedMessageId
• Escape key closes the dialog
• Focus restoration on unmount
• role="dialog", aria-modal="true", aria-labelledby

Props

All props are optional unless noted otherwise.

---

user

User to send the poll to (for 1:1 conversations).

Type	CometChat.User
Default	undefined

---

group

Group to send the poll to (for group conversations).

Type	CometChat.Group
Default	undefined

---

replyToMessage

Message to reply to (for quoted replies). When provided, the poll is sent as a reply to this message.

Type	CometChat.BaseMessage
Default	undefined

---

defaultAnswers

Default number of answer option inputs. Minimum 2, maximum 12.

Type	number
Default	2

---

onClose

Callback when close is requested (close button or Escape key).

Type	() => void
Default	undefined

---

onPollCreated

Callback when the poll is created successfully.

Type	() => void
Default	undefined

---

onError

Callback when an error occurs during poll creation.

Type	(error: unknown) => void
Default	undefined

---

title

Override for the dialog title text.

Type	string
Default	Localized "Create Poll"

---

questionPlaceholderText

Placeholder text for the question input field.

Type	string
Default	Localized placeholder

---

answerPlaceholderText

Placeholder text for answer option input fields.

Type	string
Default	Localized placeholder

---

answerHelpText

Help text displayed below the answer options section.

Type	string
Default	Localized help text

---

addAnswerText

Text for the “Add Option” button.

Type	string
Default	Localized "Add Option"

---

createPollButtonText

Text for the “Create” submit button.

Type	string
Default	Localized "Create"

CSS Selectors

Target	Selector
Root	.cometchat-create-poll
Header	.cometchat-create-poll__header
Title	.cometchat-create-poll__header-title
Close button	.cometchat-create-poll__header-close
Question input	.cometchat-create-poll__question-input
Option input	.cometchat-create-poll__option-input
Remove button	.cometchat-create-poll__option-remove
Add button	.cometchat-create-poll__add-button
Create button	.cometchat-create-poll__create-button
Error message	.cometchat-create-poll__error