> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Input

> Message Input — CometChat documentation.

`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

| 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](/ui-kit/angular/v4/message-input#auxiliarybuttonalignmentenum) | Group of constants representing the in-built alignment pattern |
| messageInputStyle | [MessageInputStyle](/ui-kit/angular/v4/message-input#messageinputstyle) | Styling properties and values of the element |

## 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. |

## 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 |

## MessageInputStyle

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](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| placeholderTextFont | Sets all the different properties of font for the hint text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font) |
| placeholderTextColor | Sets the foreground color of hint text. |
| textFont | Sets all the different properties of font for the user input text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font) |
| 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](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| maxHeight | Sets the maximum height of the element before it can trigger the scrolling or overflow behavior. |

## Events

| Name | Description |
| - | - |
| cc-message-input-changed | Event triggered when the content of the element is modified or changed by the user. |

## Usage

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <cometchat-message-input
    [placeholderText]="'your custom placeholder text'"
    ></cometchat-message-input>
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.