Properties
| Name | Type | Description |
|---|---|---|
| text | string | Initial text of the input element |
| placeholderText | string | Text that appears in the input element when it has no value set |
| disabled | boolean | When set to true, user won’t be able to interact with the input element |
| auxiliaryButtonAlignment | auxiliaryButtonAlignmentEnum | Group of constants representing the in-built alignment pattern |
| textInputStyle | TextInputStyle | Styling properties and values of the element |
| textFormatters | CometChatTextFormatter | textFormatters is an array of formatters that manipulate message input based on the provided regex patterns and trigger keys. |
Slots
User-defined view| Name | Description |
|---|---|
| primaryView | Placeholder for the main or primary view that the user is intended to engage with. For e.g. send button |
| secondaryView | Placeholder for the secondary or less prominent view compared to primary view that the user is intended to engage with. For e.g. attachment button |
| auxilaryView | Placeholder for the secondary or additional view that provides supplementary information that the user is intended to engage with. |
formatters
Array of formatters| Name | Description |
|---|---|
| textFormatters | CometChatTextFormatter |
auxiliaryButtonAlignmentEnum
Alignment constants| Name | Description |
|---|---|
| left | Aligns the auxiliary view to the left i.e. besides the secondary view |
| right | Aligns the auxiliary view to the right i.e. before the primary view |
TextInputStyle
Styling properties and values of the element| Name | Description |
|---|---|
| width | Sets the width of the element |
| height | Sets the height of the element |
| border | Sets the border of the element |
| borderRadius | Sets the border radius of the element |
| background | Sets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link |
| placeholderTextFont | Sets all the different properties of font for the hint text. Reference link |
| placeholderTextColor | Sets the foreground color of hint text. |
| textFont | Sets all the different properties of font for the user input text. Reference link |
| textColor | Sets the foreground color of user input text. |
| dividerColor | Sets the tint or color applied to the separator. |
| inputBorder | Sets the border of the text input within the element |
| inputBorderRadius | Sets the border radius of the text input within the element |
| inputBackground | Sets 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 |
| maxHeight | Sets the maximum height of the element before it can trigger the scrolling or overflow behavior. |
Events
| Name | Description |
|---|---|
| cc-text-input-changed | triggers when the content of the element is modified or changed by the user. |
| cc-text-input-entered | triggers when the enter button is pressed inside the component. |
Usage
- JavaScript
import "@cometchat/uikit-elements"; //import the web elements package.
const changeHandler = event => {
console.log(event.detail.value)
}
<cometchat-text-input
:placeholderText="Enter your message here"
@cc-text-input-changed="changeHandler($event)">
<div data-slot="secondaryView">
<button>Send message<button>
</div>
</cometchat-text-input>