Skip to content zachleat Project

🚾Web Component Star Search

A searchable catalog of standalone web components.

<vaadin-message-input>

`<vaadin-message-input>` is a Web Component for sending messages. It consists of a text area that grows on along with the content, and a send button to send message.

Category
Feedback
Built with
Lit
Library
Vaadin
Author
Vaadin
Package
@vaadin/message-input
Component size
17.6 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size
19.9 kB JS (shared by every Vaadin component, loaded once per page)
Popular
3 out of 5
Downloads
59,019/week · jsDelivr 2,123 hits/month (whole @vaadin/message-input package)
Latest stable version
25.3.2
Last published
Component last changed
(in 25.3.0)
License
Apache-2.0

<vaadin-message-input> is a Web Component for sending messages. It consists of a text area that grows on along with the content, and a send button to send message.

The message can be sent by one of the following actions:

  • by pressing Enter (use Shift + Enter to add a new line)
  • by clicking submit button.
<vaadin-message-input></vaadin-message-input>

Slots

The following slots are available for adding content to the message input:

Name Description
header Content displayed above the text area and controls
prefix Content displayed before the text area
button Button that submits the message, replacing the default one
footer Content displayed below the text area and controls

When a custom button has no text content or accessible label, aria-label attribute is set based on the i18n property.

Styling

The following state attributes are available for styling:

Attribute Description
disabled Set when the element is disabled
focused Set when the text area is focused
focus-ring Set when the text area is focused using the keyboard
has-header Set when the element has content in the header slot
has-prefix Set when the element has content in the prefix slot
has-footer Set when the element has content in the footer slot
has-tooltip Set when the element has a slotted tooltip

Internal components

In addition to <vaadin-message-input> itself, the following internal components are themable:

  • <vaadin-message-input-button> - has the same API as <vaadin-button>
  • <vaadin-text-area>

See Styling Components documentation.

Attributes

Events