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

### Slots

The following slots are available for adding content to the message input:

Name       | Description
-----------|-------------
`header`   | Content displayed above the text area and controls
`prefix`   | Content displayed before the text area
`button`   | Button that submits the message, replacing the default one
`footer`   | Content displayed below the text area and controls

When a custom button has no text content or accessible label, `aria-label` attribute
is set based on the [`i18n`](/elements/vaadin-message-input#i18n) property.

### Styling

The following state attributes are available for styling:

Attribute      | Description
---------------|---------------------------------
`disabled`     | Set when the element is disabled
`focused`      | Set when the text area is focused
`focus-ring`   | Set when the text area is focused using the keyboard
`has-header`   | Set when the element has content in the header slot
`has-prefix`   | Set when the element has content in the prefix slot
`has-footer`   | Set when the element has content in the footer slot
`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

## Events

### submit

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

Fired when a new message is submitted, 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 }>;
```