---
url: https://talkjs.com/docs/UI_Components/Theme/Theme_components/MessageField
title: '<MessageField>'

minidoc-source: js
minidoc-lib: components
---

The `<MessageField>` component is displayed at the bottom of the chat panel. It includes the text area to write messages as well as additional buttons for sending an attachment or location.

## MessageFieldProps
/** */
export declare interface MessageFieldProps  {
/** A collection of objects which are passed to all Chatbox theme components. */
common: CommonChatboxProps;
/** When a message is being edited its ID will be stored here. */
editMessageId: string|undefined;
/** An object holding the state of the message field. */
editor: EditorController;
/** The current user's permissions. */
permissions: UserPermissions;
/** The message that's currently being replied to, if any. */
referencedMessage: MessageSnapshot|undefined;
/** Controls and holds state related to voice recording. Undefined when nothing is being recorded. Use editor.recordVoiceMessage() to begin recording a message. */
voiceRecorder?: VoiceRecorderController;
}

## Example

In the default theme, the `<MessageField>` component is implemented as follows:

<GithubThemeComponent name="MessageField" />