Chat - Composer

The text input area where users draft and send messages, with support for attachments, toolbar actions, and helper text.

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

The send button is automatically disabled 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:

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 ChatProvider (or the ChatBox props that forward to it). 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';

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:

ChatDraftAttachment

The attachment type used by the composer:

Compact composer ideas

Five design ideas for the compact variant composer — click into the textarea to see the focus state.

Disabling the composer

Pass disabled to prevent all interaction. When disabled, the text area is read-only and the send button is inert. The owner state exposes disabled so custom styles can react to the state.

Localization

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

Slots

The following slots are available for customization through ChatBox:

API

• ComposerRoot
• ComposerTextArea
• ComposerSendButton
• ComposerAttachButton
• ComposerToolbar
• ComposerHelperText

API

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

• <ComposerAttachButton />
• <ComposerHelperText />
• <ComposerRoot />
• <ComposerSendButton />
• <ComposerTextArea />
• <ComposerToolbar />