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

# Text Input

> Text 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/text-input#auxiliarybuttonalignmentenum) | Group of constants representing the in-built alignment pattern                                                                |
| textInputStyle           | [TextInputStyle](/web-elements/text-input#textinputstyle)                             | Styling properties and values of the element                                                                                  |
| textFormatters           | [CometChatTextFormatter](/web-elements/text-input#formatters)                         | 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](/web-elements/text-input#formatters) |

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

<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-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>
    ```
  </Tab>
</Tabs>