Input UI

The Input UI component consumes MessageInputContext and renders the message composer. It’s typically composed of subcomponents (text input, emoji picker, etc.) that also consume MessageInputContext.

Best Practices

• Compose Input UI from existing subcomponents before creating new ones.
• Keep the send button and input field aligned with user expectations.
• Use MessageInputContext to avoid prop drilling and desync.
• Keep attachments and quoted previews in a predictable order.
• Reuse MessageInputFlat structure for accessibility and layout.

Basic Usage

To use a custom Input UI component, pass Input to Channel or MessageInput. Channel sets the default in ComponentContext, and MessageInput overrides it. If both are set, the MessageInput prop wins.

const CustomInput = () => {
  // consume `MessageInputContext` and render custom component here
};

<Chat client={client}>
  <Channel channel={channel} Input={CustomInput}>
    <MessageList />
    <MessageInput />
  </Channel>
</Chat>;

UI Customization

MessageInputFlat is a good reference implementation. It composes smaller pieces that each handle a specific part of the Input UI component.

For example, if we strip MessageInputFlat down to its core pieces and simplify it a bit, the component return resembles the following snippet:

<WithDragAndDropUpload>
  <QuotedMessagePreview />
  <UploadsPreview />
  <FileUploadButton />
  <TextareaComposer />
  <SendButton />
</WithDragAndDropUpload>

We recommend a similar approach: mix and match the exported subcomponents to fit your layout. Each one reads from MessageInputContext and requires little or no props.

For a detailed example, review the Input UI Customization example.

Props