# Input UI

The Input UI component consumes [`MessageInputContext`](/chat/docs/sdk/react/v13/components/contexts/message_input_context/) 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.

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

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

<admonition type="note">

If an `Input` prop is not provided, the `MessageInput` component will render [`MessageInputFlat`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx)
as its Input UI component by default.

</admonition>

## 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:

```tsx
<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](/chat/docs/sdk/react/v13/guides/theming/input_ui/) example.

## Props

<admonition type="note">

The Input UI component only consumes `MessageInputContext` and does not accept any optional props.

</admonition>


---

This page was last updated at 2026-04-21T07:55:47.358Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/components/message-input-components/input_ui/](https://getstream.io/chat/docs/sdk/react/v13/components/message-input-components/input_ui/).