---
title: "Message Composer"
description: "The channel input bar: attachment control, text field with combobox hooks, and send."
---

The channel input bar: attachment control, text field with combobox hooks, and send. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Message Composer — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add message-composer
```

Files written — React: components/ui/message-composer.tsx. Vue: components/ui/message-composer/MessageComposer.vue, components/ui/message-composer/index.ts.

## Usage

React:

```tsx
import { MessageComposer } from "@/components/ui/message-composer"
```

Vue:

```ts
import { MessageComposer } from "@/components/ui/message-composer"
```

## API reference

**`MessageComposer`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `channelName` | `string` | — | Channel the message goes to; drives the default placeholder and labels. |
| `value` | `string \| undefined` | — | Optional value value. |
| `defaultValue` | `string \| undefined` | — | Optional defaultValue value. |
| `onValueChange` | `(value: string) => void \| undefined` | — | Optional onValueChange value. |
| `placeholder` | `string \| undefined` | — | Optional placeholder value. |
| `onSubmit` | `(value: string) => void \| undefined` | — | Sent on Enter and on the send control. |
| `onEscape` | `() => void \| undefined` | — | Optional onEscape value. |
| `onNavigate` | `(direction: "up" \| "down") => void \| undefined` | — | Arrow keys, for driving a suggestion list above the composer. |
| `autocomplete` | `boolean \| undefined` | — | Wire the input up as a combobox for slash-command autocomplete. |
| `ariaControls` | `string \| undefined` | — | Optional ariaControls value. |
| `ariaExpanded` | `boolean \| undefined` | — | Optional ariaExpanded value. |
| `ariaActiveDescendant` | `string \| undefined` | — | Optional ariaActiveDescendant value. |
| `actions` | `React.ReactNode \| undefined` | — | Extra controls rendered between the field and the send button. |
| `onAdd` | `() => void \| undefined` | — | Optional onAdd value. |

The registry exports `MessageComposer`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Keep the textarea labelled with the channel context, let `Enter` and `Shift+Enter` retain their documented meanings, and give every icon-only action an accessible name.

## Tokens

Message Composer reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.