---
title: MessageInput
description: MessageInput
element: vaadin-message-input
---

## Description

`<vaadin-message-input>` is a Web Component for sending messages.
It consists of a text area that grows on along with the content, and a send button to send message.

The message can be sent by one of the following actions:
- by pressing Enter (use Shift + Enter to add a new line)
- by clicking `submit` button.

```html
<vaadin-message-input></vaadin-message-input>
```

### Styling

The following state attributes are available for styling:

Attribute      | Description
---------------|---------------------------------
`disabled`     | Set when the element is disabled
`has-tooltip`  | Set when the element has a slotted tooltip

### Internal components

In addition to `<vaadin-message-input>` itself, the following internal
components are themable:

- `<vaadin-message-input-button>` - has the same API as `<vaadin-button>`
- `<vaadin-text-area>`

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

## Properties

### disabled

**Type:** `boolean`

Set to true to disable this element.

### i18n

**Type:** `MessageInputI18n`

The object used to localize this component. To change the default
localization, replace this with an object that provides all properties, or
just the individual properties you want to change.

The object has the following JSON structure and default values:
```js
{
  // Used as the button label
  send: 'Send',

  // Used as the input field's placeholder and aria-label
  message: 'Message'
}
```

See also: [MessageInputI18n](#messageinputi18n)

### value

**Type:** `string | null | undefined`

Current content of the text input field

## Methods

### focus

**Type:** `(options?: FocusOptions | undefined) => void`



## Events

### submit

**Type:** [MessageInputSubmitEvent](#messageinputsubmitevent)

Fired when a new message is submitted with `<vaadin-message-input>`, either
by clicking the "send" button, or pressing the Enter key.

## Types

### MessageInputI18n

```ts
export interface MessageInputI18n {
  send?: string;
  message?: string;
}
```

### MessageInputSubmitEvent

```ts
/**
 * Fired when a new message is submitted with `<vaadin-message-input>`, either
 * by clicking the "send" button, or pressing the Enter key.
 */
export type MessageInputSubmitEvent = CustomEvent<{ value: string }>;
```