React Prompt component

Preview

const send = (message: string) => {};

<Prompt onSubmit={send}>
  <Prompt.Textarea />
  <Prompt.Toolbar>
    <Prompt.Attach />

Usage

Use when

Chat and AI assistant interfaces
Multi-line input with a submit action
Toolbars carrying attachments or a model picker

Avoid when

Single-line text (use Input)
Multi-line with no toolbar (use Textarea)
Search-only fields (use Input with the search variant)

Implementation notes

Always pass onSubmit; pair working with onStop so Send becomes Stop
pending while the message is on its way; working while the assistant responds
The text stays editable while working, so the next message can be drafted
Prompt.Picker chooses one of a few options (a model, a mode) from a menu; its name is read before the value
Prompt.Submit is the one accent action; a menu on it opens by right-click, ArrowDown or long-press, never by a plain click
Wire onFiles once; the attach button, paste and drop all route through it
Render Prompt.Attachments above Prompt.Textarea; they are part of the message
invalid with errorMessage says why the message can't be sent

Installation

pnpm add @usefragments/ui

The npm package stays managed by your package manager. Import styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.

Anatomy

Import Prompt once, then compose its parts with dot notation.

Prompt.Textarea
Prompt.Toolbar
Prompt.Actions
Prompt.Info
Prompt.Picker
Prompt.Attach
Prompt.Attachments
Prompt.Submit

The text area, attach and Send.

const send = (message: string) => {};

<Prompt onSubmit={send}>
  <Prompt.Textarea />
  <Prompt.Toolbar>
    <Prompt.Attach />
    <Prompt.Actions>
      <Prompt.Submit />
    </Prompt.Actions>
  </Prompt.Toolbar>
</Prompt>

Examples

With Picker

A model picker and a token count beside Send.

const models = [{ value: "fast", label: "Fast" }, { value: "thorough", label: "Thorough" }];
const [model, setModel] = React.useState("fast");
const send = (message: string) => {};

<Prompt onSubmit={send}>
  <Prompt.Textarea />

While Working

Send becomes Stop; the text stays editable.

const [responding, setResponding] = React.useState(true);
const send = (message: string) => setResponding(true);
const stop = () => setResponding(false);

<Prompt working={responding} onStop={stop} onSubmit={send}>
  <Prompt.Textarea />

With Attachments

Attach, paste or drop files; chips sit above the text.

import type { PromptAttachment } from "@usefragments/ui";

const [files, setFiles] = React.useState<PromptAttachment[]>([{ id: "notes", name: "notes.txt" }]);
const addFiles = (selected: File[]) => setFiles((current) => [...current, ...selected.map((file, index) => ({ id: `${file.name}-${index}`, name: file.name }))]);
const removeFile = (id: string) => setFiles((current) => current.filter((file) => file.id !== id));
const send = (message: string) => {};

Invalid

Says why the message can't be sent.

const send = (message: string) => {};

<Prompt invalid errorMessage="Messages can be up to 4,000 characters." onSubmit={send}>
  <Prompt.Textarea />
</Prompt>

Disabled

Nothing can be typed or sent.

<Prompt disabled placeholder="Connect a repository to ask">
  <Prompt.Textarea />
</Prompt>

API reference

Component props
Prop	Type	Default	Description
`accept`	`string \| undefined`	Not set	File types the attach, paste and drop paths take
`Actions.children`	`React.ReactNode`	Not set	—
`Attach.accept`	`string \| undefined`	Not set	Overrides the prompt's `accept`.
`Attach.aria-label`	`string \| undefined`	Not set	Accessible name.
`Attach.children`	`React.ReactNode`	Not set	Custom glyph. Defaults to a plus.
`Attach.className`	`string \| undefined`	Not set	—
`Attach.disabled`	`boolean \| undefined`	Not set	—
`Attach.multiple`	`boolean \| undefined`	Not set	—
`Attachments.className`	`string \| undefined`	Not set	—
`Attachments.items`Required	`PromptAttachment[]`	Not set	—
`Attachments.onRemove`	`((id: string) => void) \| undefined`	Not set	Omit to render the strip read-only.
`children`Required	`React.ReactNode`	Not set	Prompt parts: Attachments, Textarea, Toolbar
`defaultValue`	`string \| undefined`		Initial text when uncontrolled
`disabled`	`boolean \| undefined`	`false`	Nothing can be typed or sent
`errorMessage`	`React.ReactNode`	Not set	Why the message can't be sent, shown under the text
`Info.children`Required	`React.ReactNode`	Not set	—
`invalid`	`boolean \| undefined`	`false`	The message can't be sent as written; pair with errorMessage
`maxRows`	`number \| undefined`	`8`	Rows before the text area scrolls
`minRows`	`number \| undefined`	`1`	Rows before the text area grows
`onFiles`	`((files: File[]) => void) \| undefined`	Not set	Receives files from Attach, paste and drop
`onStop`	`(() => void) \| undefined`	Not set	Stop the response while working
`onSubmit`	`((value: string) => void) \| undefined`	Not set	Called with the text when the message is sent
`onValueChange`	`((value: string) => void) \| undefined`	Not set	Called with the new text on every change
`pending`	`boolean \| undefined`	`false`	Sending: Send shows a spinner after a second and Enter waits
`Picker.aria-label`Required	`string`	Not set	What the choice is about (Model, Agent); read before the choice.
`Picker.className`	`string \| undefined`	Not set	—
`Picker.defaultValue`	`string \| undefined`	Not set	Initial value when uncontrolled.
`Picker.disabled`	`boolean \| undefined`	Not set	—
`Picker.icon`	`React.ReactNode`	Not set	Leading glyph.
`Picker.onValueChange`	`((value: string) => void) \| undefined`	Not set	—
`Picker.options`Required	`PromptPickerOption[]`	Not set	—
`Picker.placeholder`	`string \| undefined`	Not set	Shown before anything is chosen.
`Picker.value`	`string \| undefined`	Not set	Controlled value.
`placeholder`	`string \| undefined`	`Ask, search or chat…`	Hint in the empty text area
`readOnly`	`boolean \| undefined`	`false`	The text can be read and selected, not changed or sent
`Submit.aria-label`	`string \| undefined`	Not set	Accessible name of the send action.
`Submit.children`	`React.ReactNode`	Not set	Custom glyph. Defaults to an up arrow.
`Submit.className`	`string \| undefined`	Not set	—
`Submit.menu`	`React.ReactNode`	Not set	Menu items for other ways to send (queue, send later). A click still sends; right-click, a long press, ArrowDown, Shift+F10 or the context-menu key opens the menu.
`Submit.stopLabel`	`string \| undefined`	Not set	Accessible name of the stop action while working.
`submitOnEnter`	`boolean \| undefined`	`true`	Enter sends, Shift+Enter breaks the line
`Textarea.placeholder`	`string \| undefined`	Not set	Override the prompt's placeholder.
`Toolbar.children`Required	`React.ReactNode`	Not set	—
`value`	`string \| undefined`	Not set	Controlled text
`working`	`boolean \| undefined`	`false`	The assistant is responding: the work wash plays, Send becomes Stop when onStop is set, the text stays editable

Accessibility

Enter sends, Shift+Enter breaks the line; Enter waits while pending or working
The frame draws one focus ring for the text area
Send and Stop are labelled buttons; the picker reads its name before its value
The error message is linked with aria-describedby and the text area reports aria-invalid
Working sets aria-busy; the drop hint is words, not only a ring

InputalternativeUse Input for simple single-line text input
TextareaalternativeUse Textarea for multi-line without toolbar

Next steps

Accessibility guidanceThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.