On this page
Overview
Show code, AskAnything.tsx
Variants
Layouts
A composer is its field alone, or has a row below the field with controls at its start and the send button at its end, and a note under it.
Show code, StartAndFooter.tsx
- Field alone
A chat or a prompt. The default.
- With a start row
Attachments or a choice of model, beside the send button below.
Anatomy
Composer
Surface
Input
Start
Send
Footer
Show code, ComposerAnatomy.tsx
Behaviour
Pending send
While a send is in progress, the send button shows a spinner and the next send waits; the field keeps its text and height, stays editable and keeps focus.
Show code, PendingSend.tsx
Adapting to width
A composer fills its container, and its field grows with its text up to a set number of lines, then scrolls.
Show code, GrowingDraft.tsx
Rules
A composer stays ready for the next message, below the conversation it adds to.
Use it when
- A message in a conversation, such as a chat, a comment or a prompt
- A reply that runs after a send, which people may stop
Show code, PendingStaysEditable.tsx
Show code, DisabledWhileSending.tsx
In a conversation
Place the composer below the conversation it adds to.
- Show a message that couldn't be sent in the conversation, with its status.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to the field, the start controls and the send button. |
| Enter in the field | Sends the message, unless it is blank, pending or running. |
| Shift+Enter in the field | Starts a new line. |
| Enter, Space on the button | Sends the message, or stops the reply. |