# Composer

> The box a person writes a chat message in: a form whose text field grows with what is typed up to a cap and then scrolls, over a toolbar for attaching files, picking options and sending.

```ts
import { Composer } from "@sdxc/ui/chat";
```

Renders the composer's surface: one rounded box that draws the focus ring for the field
inside it, so the field, its attachments and its toolbar read as a single control.

## Examples

```tsx
<Composer method="post" action="/chat">
	<Composer.Input name="prompt" aria-label="Message" required />
	<Composer.Toolbar><ComposerSubmit labels={{ send: "Send", stop: "Stop" }} /></Composer.Toolbar>
</Composer>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Attachments, the Composer.Input and a Composer.Toolbar, in that order. |

Also accepts everything in `TagProps<"form">`.


### Composer.Input

The message field: borderless inside the composer's frame, one line tall when empty, growing with its text to `--ui-composer-max-block-size` (twelve lines) and scrolling past it.

Takes no props of its own.

### Composer.Toolbar

The row under the field: controls at the start, the hint and send control at the end.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Attach and option controls first, then a Composer.Hint and the send control. |

Also accepts everything in `TagProps<"div">`.


### Composer.Hint

How to send, set at the toolbar's end before the send control.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | How to send, such as `<Keyboard>Enter</Keyboard> to send`. |

Also accepts everything in `TagProps<"p">`.