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

# Message Input

> Message Input — CometChat documentation.

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](/web-elements/message-input#auxiliarybuttonalignmentenum) | Group of constants representing the in-built alignment pattern          |
| messageInputStyle        | [MessageInputStyle](/web-elements/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="JavaScript">
    ```javascript theme={null}
    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>
    ```
  </Tab>
</Tabs>