Message Input

Message Input allows users to author and send messages.
  onSubmit={({ detail: { value } }) =>`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} />
  onSubmit={({ detail: { value } }) =>
        text: value,
        time: "seconds ago",
        userName: "Milla Sting",
        userColorIndex: 3,
Component Usage recommendations

Message List

Show a list of messages.

You can find more information in the corresponding article on