MessageInput

Description #

<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>

Properties #

disabled #

Type: boolean

Set to true to disable this element.

i18n #

Type: MessageInputI18n

The object used to localize this component. To change the default localization, replace this with an object that provides all properties, or just the individual properties you want to change.

The object has the following JSON structure and default values:

{
  // Used as the button label
  send: 'Send',

  // Used as the input field's placeholder and aria-label
  message: 'Message'
}

See also: MessageInputI18n

value #

Type: string | null | undefined

Current content of the text input field

Methods #

focus #

Type: (options?: FocusOptions | undefined) => void

Events #

submit #

Type: MessageInputSubmitEvent

Fired when a new message is submitted with <vaadin-message-input>, either by clicking the "send" button, or pressing the Enter key.

Types #

MessageInputI18n #

export interface MessageInputI18n {
  send?: string;
  message?: string;
}

MessageInputSubmitEvent #

/**
 * Fired when a new message is submitted with `<vaadin-message-input>`, either
 * by clicking the "send" button, or pressing the Enter key.
 */
export type MessageInputSubmitEvent = CustomEvent<{ value: string }>;