> Markdown version of [Message Input](https://vaadin.com/docs/v23/components/message-input). Section index: [llms.txt](https://vaadin.com/docs/v23/components/llms.txt)

# Message Input

Message Input allows users to author and send messages.

**TypeScript** — `message-input-component.ts`

```html
<vaadin-message-input @submit="${this._handleSubmit}"></vaadin-message-input>
```

**Java** — `MessageInputComponent.java`

```java
MessageInput input = new MessageInput();
input.addSubmitListener(submitEvent -> {
    Notification.show("Message received: " + submitEvent.getValue(),
            3000, Notification.Position.MIDDLE);
});
add(input);
```

The user can send the message with one of the following actions:

- by pressing `Enter` (use `Shift`+`Enter` to add a new line)

- by clicking the “send” button.

Use the [Message List](https://vaadin.com/docs/v23/components/message-list.md) component to show messages that users have sent.

**TypeScript** — `message-basic.ts`

```html
<vaadin-message-list .items="${this.items}"></vaadin-message-list>
<vaadin-message-input @submit="${this._handleSubmit}"></vaadin-message-input>
```

**Java** — `MessagesBasic.java`

```java
MessageList list = new MessageList();
MessageInput input = new MessageInput();
input.addSubmitListener(submitEvent -> {
    MessageListItem newMessage = new MessageListItem(
            submitEvent.getValue(), Instant.now(), "Milla Sting");
    newMessage.setUserColorIndex(3);
    List<MessageListItem> items = new ArrayList<>(list.getItems());
    items.add(newMessage);
    list.setItems(items);
});

Person person = DataService.getPeople(1).get(0);
MessageListItem message1 = new MessageListItem(
        "Nature does not hurry, yet everything gets accomplished.",
        LocalDateTime.now().minusDays(1).toInstant(ZoneOffset.UTC),
        "Matt Mambo");
message1.setUserColorIndex(1);
MessageListItem message2 = new MessageListItem(
        "Using your talent, hobby or profession in a way that makes you contribute with something good to this world is truly the way to go.",
        LocalDateTime.now().minusMinutes(55).toInstant(ZoneOffset.UTC),
        "Linsey Listy", person.getPictureUrl());
message2.setUserColorIndex(2);
list.setItems(message1, message2);

VerticalLayout chatLayout = new VerticalLayout(list, input);
chatLayout.setHeight("500px");
chatLayout.setWidth("400px");
chatLayout.expand(list);
add(chatLayout);
```

## <a id="related-components"></a>Related Components

| Component                                                              | Usage recommendations    |
| ---------------------------------------------------------------------- | ------------------------ |
| [Message List](https://vaadin.com/docs/v23/components/message-list.md) | Show a list of messages. |

`F69B472B-4E0A-4593-9A6C-5E57B417B1FE`