Skip to main content
Version: v4

Message Input

CometChatMessageInput is a component that provides a skeleton layout for contents of like TextField, auxiliary options, primary button view and attachment options. This element enable users to enter free-form text data along with custom view of 3 variants (primary, secondary and auxiliary).

Properties

NameTypeDescription
textstringInitial text of the input element
placeholderTextstringText that appears in the input element when it has no value set
disabledbooleanWhen set to true, user won't be able to interact with the input element
auxiliaryButtonAlignmentauxiliaryButtonAlignmentEnumGroup of constants representing the in-built alignment pattern
messageInputStyleMessageInputStyleStyling properties and values of the element

Slots

User-defined view

NameDescription
primaryViewPlaceholder for the main or primary view that the user is intended to engage with. For e.g. send button
secondaryViewPlaceholder for the secondary or less prominent view compared to primary view that the user is intended to engage with. For e.g. attachment button
auxilaryViewPlaceholder for the secondary or additional view that provides supplementary information that the user is intended to engage with.

auxiliaryButtonAlignmentEnum

Alignment constants

NameDescription
leftAligns the auxiliary view to the left i.e. besides the secondary view
rightAligns the auxiliary view to the right i.e. before the primary view

MessageInputStyle

Styling properties and values of the element

NameDescription
widthSets the width of the element
heightSets the height of the element
borderSets the border of the element
borderRadiusSets the border radius of the element
backgroundSets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link
placeholderTextFontSets all the different properties of font for the hint text. Reference link
placeholderTextColorSets the foreground color of hint text.
textFontSets all the different properties of font for the user input text. Reference link
textColorSets the foreground color of user input text.
dividerColorSets the tint or color applied to the separator.
inputBorderSets the border of the text input within the element
inputBorderRadiusSets the border radius of the text input within the element
inputBackgroundSets all background style properties at once, such as color, image, origin and size, or repeat method of the text input within the element. Reference link
maxHeightSets the maximum height of the element before it can trigger the scrolling or overflow behavior.

Events

NameDescription
cc-message-input-changedEvent triggered when the content of the element is modified or changed by the user.

Usage

import "@cometchat/uikit-elements"; //import the web elements package.

const changeHandler = event => {
console.log(event.detail.value)
}

<cometchat-message-input
:placeholderText="Enter your message here"
@cc-message-input-changed="changeHandler($event)">
<div slot="secondaryView">
<button>Send message<button>
</div>
</cometchat-message-input>