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

# Message Input

Message Input allows users to author and send messages.

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

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

**Flow** — `MessageInputComponent.java`

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

**React** — `message-input-component.tsx`

```tsx
function handleSubmit(event: MessageInputSubmitEvent) {
  const message = event.detail.value;
  Notification.show(`Message received: ${message}`, { position: 'middle' });
}

return <MessageInput onSubmit={handleSubmit} />;
```

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/latest/components/message-list.md) component to show messages that users have sent.

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

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

**Flow** — `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);
```

**React** — `message-basic.tsx`

```tsx
<MessageList items={items.value} />
<MessageInput
  onSubmit={(e) => {
    items.value = [
      ...items.value,
      {
        text: e.detail.value,
        time: 'seconds ago',
        userName: 'Milla Sting',
        userAbbr: 'MS',
        userColorIndex: 3,
      },
    ];
  }}
/>
```

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

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

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