PromptInput

Open in Figma
The composer: auto-growing textarea, attachments by picker/paste/drop, model picker, and a submit that follows ChatStatus (send → spinner → stop → retry). PromptInputPresets fills it from a chip, PromptInputAnswering names the question being answered, PromptInputHint says one quiet line above it.

Playground

The send control follows status: send → spinner → stop → retry.

status
<PromptInput
  value={value}
  onValueChange={setValue}
  onSubmit={send}
  onStop={stop}
  placeholder="Ask about anyone you know…"
/>

Compound

Attachments by picker, paste, or drop; a model picker; a mic slot. The glow breathes while listening, and what you send lifts and blurs away.

status
<PromptInput
  value={value}
  onValueChange={setValue}
  onSubmit={send}
  accept="image/*,.pdf"
>
  <PromptInputAttachments />
  <PromptInputField><PromptInputTextarea /></PromptInputField>
  <PromptInputToolbar>
    <PromptInputTools>
      <PromptInputActionAddAttachments />
      <PromptInputButton label="Dictate"><MicIcon /></PromptInputButton>
      <PromptInputModelSelect
        models={MODELS}
        value={model}
        onChange={setModel}
      />
    </PromptInputTools>
    <PromptInputSubmit />
  </PromptInputToolbar>
</PromptInput>

Variants

Default is the chat composer, tall is the Today ask box, docked is a one-line bar pinned to the bottom of a page. Switch the brand to v2 for the redesign's send button and focus ring.

variant
<PromptInput
  variant="tall"
  value={value}
  onValueChange={setValue}
  onSubmit={send}
/>

Queue while busy

With queueable, Enter during a reply hands the message to the host to queue; Stop stays beside it.

status
    <PromptInput
  value={value}
  onValueChange={setValue}
  onSubmit={enqueue}
  onStop={stop}
  status="streaming"
  queueable
/>