---
url: https://talkjs.com/docs/Guides/JavaScript/Classic/Message_Field
---

# Customize the message field

Customize the message field's appearance and behavior.

Ask a question Copy for LLM [View as Markdown](/docs/Guides/JavaScript/Classic/Message_Field.md)
You have a range of options to customize the [message field](/docs/Features/Messages/Message_Field_Options/) of your chat. This page details the available customization options.

## Set visibility of the message field

By default, the message field is always visible. The [messageField.visible](/docs/UI_Components/JavaScript/Classic/Other_Interfaces/#MessageFieldOptions__visible) option, together with [MessageField.setVisible](/docs/UI_Components/JavaScript/Classic/Other_Interfaces/#MessageField__setVisible) let you programmatically show or hide the message field:

```javascript
const inbox = session.createInbox({ messageField: { visible: false } });
inbox.mount(document.getElementById('inbox-container'));

// ... later:
inbox.messageField.setVisible(true);
```

Additionally, you can configure the message field to be visible depending on the current conversation's properties, using a [conversation predicate](/docs/UI_Components/JavaScript/Classic/Other_Interfaces/#ConversationPredicate). For example, to hide the message field on every conversation in which the current user can not write, you could do:

```javascript
const predicate = {
  access: ['==', 'ReadWrite'],
};
const inbox = session.createInbox({ messageField: { visible: predicate } });
```

This will automatically show or hide the message field as the user switches between conversations that they do and do not have write access to.

You can use custom fields too: for example, to temporarily mute all users, you could set a "muted" custom field on the conversation, and use a predicate like this:

```javascript
const predicate = {
  custom: {
    muted: '!exists',
  },
};
const inbox = session.createInbox({
  messageField: { visible: predicate },
});
```

If you then use the [REST API](/docs/REST_API/Conversations/#setting-conversation-data) to add or remove the `muted` custom field, the message field will disappear and reappear in real-time.

## Autofocus the message field

Use the [`autofocus`](/docs/UI_Components/JavaScript/Classic/Other_Interfaces/#MessageFieldOptions__autofocus) property to specify whether the message field should automatically focus when the user navigates:

```js
const chatbox = session.createChatbox({
  messageField: { autofocus: 'smart' },
});
```

The available options are `'smart'` or `false`. The default option is `'smart'`, which means that focus is switched to the message field whenever a conversation is selected, if it is possible to do this without negative side effects. This is possible when:

- The message field is inside the browser viewport (so focusing will not unexpectedly cause the page to scroll)
- The user is likely to be on a desktop or laptop computer (so focusing will not unexpectedly expand a mobile on-screen keyboard).
If you need more control over when you focus the message field, set `autofocus` to `false` and call the [`messageField.focus()` method](/docs/UI_Components/JavaScript/Classic/Other_Interfaces/#MessageField__focus) when you need it:

```js
chatbox.messageField.focus();
```

Note that on mobile devices, this will cause the on-screen keyboard to pop up, obscuring part of the screen.

## Set placeholder text

Use the [`placeholder` property](/docs/UI_Components/JavaScript/Classic/Other_Interfaces/#MessageFieldOptions__placeholder) to override the placeholder text that is displayed in the message field when no text has yet been entered.

```js
const chatbox = session.createChatbox({
  messageField: { placeholder: 'Write a message' },
});
```

The default placeholder text is "Say something...", or a [translation](/docs/Features/Language_Support/#localization).

## Pre-fill the message field with a suggested message

[MessageField.setText](/docs/UI_Components/JavaScript/Classic/Other_Interfaces/#MessageField__setText) lets you build a "message suggestion" or "canned responses" type of mechanism by pre-filling the text in the message field. This way, users have two options: they can send the suggested message to save time or they can change it to fit their specific questions.

You can pre-populate the message field immediately when creating the UI:

```javascript
const inbox = session.createInbox({ ... });
inbox.messageField.setText("Hey, is this item still available?")
inbox.mount(document.getElementById("inbox-container"));
```

Or, at any time, modify it in an already-mounted Inbox:

```javascript
inbox.messageField.setText('Hey, this works too? Great!');
```

It's done similarly with the Chatbox and the Popup.

## Enable or turn off the spellcheck

Use the [`spellcheck` property](/docs/UI_Components/JavaScript/Classic/Other_Interfaces/#MessageFieldOptions__spellcheck) to specify whether the message field is subject to spell-checking by the underlying browser or OS, by setting the [spellcheck HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-spellcheck).

```js
const chatbox = session.createChatbox({
  messageField: { spellcheck: true },
});
```

Note that setting `spellcheck` to `true` may also enable autocorrect on some mobile devices.

By default, `spellcheck` is set to `false`.

## Select whether the Enter key sends a message

Use the [`enterSendsMessage` property](/docs/UI_Components/JavaScript/Classic/Other_Interfaces/#MessageFieldOptions__enterSendsMessage) to select whether pressing the Enter key sends a message, if there is text in the message field:

```js
const chatbox = session.createChatbox({
  messageField: { enterSendsMessage: true },
});
```

When set to `false`, the only way to send a message is by clicking or touching the **Send** button.

By default, `enterSendsMessage` is set to `true`.