Docs

Docs

Message Input

Message Input allows users to author and send messages.
<MessageInput
  onSubmit={({ detail: { value } }) =>
    Notification.show(`Message received: ${value}`, { position: "middle" })
  }
/>

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 component to show messages that users have sent.

<MessageList items={items} />
<MessageInput
  onSubmit={({ detail: { value } }) =>
    setItems([
      ...items,
      {
        text: value,
        time: "seconds ago",
        userName: "Milla Sting",
        userColorIndex: 3,
      },
    ])
  }
/>
Component Usage recommendations

Message List

Show a list of messages.
Important
 You can find more information in the corresponding article on vaadin.com.