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,
},
])
}
/>
Related Components
Component | Usage recommendations |
---|---|
Show a list of messages. |
Important
| You can find more information in the corresponding article on vaadin.com. |