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>