realtime pattern
Chat — composer
The input row inside chat-thread. Reusable in comments + DMs.
When to use it
Anywhere a user types a message that gets sent on Enter.
- Type → send in 0 friction
- Mention + emoji insertion easy
- File attachment in 2 taps
Layout regions
- composer
- attachments
- Pending file uploads above the input
- mentions
- Anchored mention popover when "@" typed
States
- default
- Empty
- partial
- Mention picker open
- loading
- Uploading attachment
- error
- Send failed
Example
<form onSubmit={send}><Textarea variant="auto" placeholder="Type a message…" onKeyDown={onKey} /><IconButton aria-label="Attach"><PaperclipIcon /></IconButton><IconButton aria-label="Send" type="submit"><SendIcon /></IconButton></form>The full Chat — composer pattern specifies 3 exact microcopy strings, 2 motion specs, 5 composition rules — all gated behind the full recipe. Get the full recipe.