My Design System

Message Input

Message Input allows users to author and send messages.

Open in a
new tab

The inline .renderer function is encapsulated by the guard directive for performance reasons. See the official Lit documentation for more details.

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

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
<vaadin-message-list .items="${this.items}"></vaadin-message-list>
<vaadin-message-input @submit="${this._handleSubmit}"></vaadin-message-input>
ComponentUsage recommendations

Message List

Show a list of messages.