Docs

Docs

Message Input

Message Input allows users to author and send messages.

Message Input allows users to author and send messages.

Open in a
new tab
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 component to show messages that users have sent.

Open in a
new tab
<MessageList items={items} />
<MessageInput
  onSubmit={(e) => {
    setItems([
      ...items,
      {
        text: e.detail.value,
        time: 'seconds ago',
        userName: 'Milla Sting',
        userAbbr: 'MS',
        userColorIndex: 3,
      },
    ]);
  }}
/>
Component Usage recommendations

Message List

Show a list of messages.