Chat - Composer

The text input area where users draft and send messages, with auto-resize, keyboard shortcuts, and a send button.

Overview

The composer is the input region at the bottom of the chat surface. ChatComposer provides Material UI styling — border, padding, and theme tokens are applied automatically.

Import

import {
  ChatComposer,
  ChatComposerLabel,
  ChatComposerTextArea,
  ChatComposerSendButton,
  ChatComposerAttachButton,
  ChatComposerToolbar,
  ChatComposerHelperText,
} from '@mui/x-chat';

Component anatomy

Inside ChatBox, the composer renders the following structure:

ChatComposer                  ← <form> element, border-top divider
  ChatComposerLabel           ← optional <label> for accessibility
  ChatComposerTextArea        ← auto-resizing textarea
  ChatComposerToolbar         ← button row
    ChatComposerAttachButton  ← file attach trigger
    ChatComposerSendButton    ← submit button (disabled when empty/streaming)
  ChatComposerHelperText      ← disclaimer or character count

Text area

ChatComposerTextArea is an auto-resizing <textarea> that grows with content. It submits on Enter and inserts a newline on Shift+Enter.

Placeholder text

Customize the placeholder through slotProps:

IME composition

The composer correctly handles IME (Input Method Editor) composition for CJK languages. While the user is composing characters (for example, selecting Kanji), pressing Enter confirms the character selection instead of submitting the message. Submission is blocked until composition ends.

Send button

ChatComposerSendButton disables automatically when:

• The text area is empty (no text content).
• A response is currently streaming.
• The composer is explicitly disabled.

Attach button

The attach button opens the browser file picker. Selected files are queued as draft attachments and previewed in the composer area.

Set features={{ attachments: false }} to hide the attach button:

For full details on attachment configuration — accepted MIME types, file size limits, and upload lifecycle — see Attachments.

Helper text

A helper text line appears below the composer. Use it for legal disclaimers, character counts, or contextual hints.

{
  /* Hide the helper text */
}
<ChatBox adapter={adapter} features={{ helperText: false }} />;

Controlled composer value

The composer value can be controlled externally through ChatBox props (which forward to the internal ChatProvider). The demo below mirrors the current composer value above the chat surface:

useChatComposer() hook

For deeper control, the useChatComposer() hook provides direct access to the composer state:

import { useChatComposer } from '@mui/x-chat/headless';

function ComposerInfo() {
  const composer = useChatComposer();
  return (
    <div>
      <p>Current value: {composer.value}.</p>
      <p>Attachments: {composer.attachments.length}.</p>
      <p>Submitting: {composer.isSubmitting ? 'Yes' : 'No'}.</p>
      <button onClick={() => composer.clear()}>Clear</button>
    </div>
  );
}

The hook returns:

Disabling the composer

Pass disabled to prevent all interaction. When disabled, the text area is read-only and the send button is inert.

Localization

The composer uses these locale text keys (customizable via localeText on ChatBox or ChatRoot):

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <ChatComposerAttachmentList />
• <ChatComposerHelperText />
• <ChatComposerLabel />
• <ChatComposerSendButton />
• <ChatComposerTextArea />
• <ChatComposerToolbar />