Prompt | Fragments

Preview

<Prompt onSubmit={(value) => console.log(value)}>
  <Prompt.Textarea />
  <Prompt.Toolbar>
    <Prompt.Actions />
    <Prompt.Info>
      <Prompt.Submit />

Installation

npx @usefragments/cli add prompt

Writes src/fragments/ui/components/Prompt plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Anatomy

Prompt is a compound: import the root and reach its parts through dot notation.

Prompt.Textarea
Prompt.Toolbar
Prompt.Tabs
Prompt.Tab
Prompt.Actions
Prompt.Info
Prompt.ActionButton
Prompt.ModeButton
Prompt.Select
Prompt.Attach
Prompt.Attachments
Prompt.Usage
Prompt.Submit

A textarea and a submit button, nothing else.

<Prompt onSubmit={(value) => console.log(value)}>
  <Prompt.Textarea />
  <Prompt.Toolbar>
    <Prompt.Actions />
    <Prompt.Info>
      <Prompt.Submit />
    </Prompt.Info>
  </Prompt.Toolbar>
</Prompt>

Examples

With Actions

Attach and mode controls sit to the left of submit.

<Prompt onSubmit={(value) => console.log(value)}>
  <Prompt.Textarea />
  <Prompt.Toolbar>
    <Prompt.Actions>
      <Prompt.ActionButton aria-label="Add attachment">
        +

With Usage

A quota readout sits beside the submit button.

<Prompt onSubmit={(value) => console.log(value)}>
  <Prompt.Textarea />
  <Prompt.Toolbar>
    <Prompt.Actions>
      <Prompt.ActionButton aria-label="Add attachment">
        +

Agent Composer

Controls float on the writing surface instead of a footer.

<Prompt
  variant="ghost"
  submitOnEnter={false}
  minRows={3}
  onSubmit={(value) => console.log(value)}
>

With Attachments

Staged files list above the text they belong to.

<Prompt onSubmit={(value) => console.log(value)}>
  <Prompt.Attachments
    items={[
      { id: '1', name: 'findings-export.csv', size: 20480 },
      { id: '2', name: 'dashboard.png', size: 153600 },
    ]}

Loading State

Input locks and submit spins while the request runs.

<Prompt
  onSubmit={(value) => console.log(value)}
  loading
  defaultValue="Tell me about the weather..."
>
  <Prompt.Textarea />

Disabled

Everything dims and stops responding to input.

<Prompt onSubmit={(value) => console.log(value)} disabled>
  <Prompt.Textarea />
  <Prompt.Toolbar>
    <Prompt.Actions>
      <Prompt.ActionButton aria-label="Add attachment">
        +

API

Component props
Prop	Type	Default	Description
`children`Required	`node`	Not set	Prompt composition using Prompt sub-components
`value`	`string`	Not set	Controlled input value
`defaultValue`	`string`		Uncontrolled default value
`onChange`	`function`	Not set	Called when value changes
`onSubmit`	`function`	Not set	Called on form submission
`placeholder`	`string`	`Ask, Search or Chat...`	Placeholder text for the textarea
`disabled`	`boolean`	`false`	Disable the entire prompt
`loading`	`boolean`	`false`	Show loading state
`minRows`	`number`	`1`	Minimum number of visible rows
`maxRows`	`number`	`8`	Maximum number of visible rows
`autoResize`	`boolean`	`true`	Enable auto-resize based on content
`submitOnEnter`	`boolean`	`true`	Submit on Enter (Shift+Enter for newline)
`placement`	`enuminlinefixedsticky`	`inline`	Where the card sits: inline in the flow, fixed to the viewport bottom, or sticky to the content area (offset by --fui-prompt-inset-left)
`onFiles`	`function`	Not set	Called with files added by the attach button, a paste, or a drop anywhere on the card. Providing it enables all three.
`accept`	`string`	Not set	accept filter for the attach button's picker, e.g. "image/*"
`variant`	`enumoutlineghost`	`outline`	Card chrome. "outline" keeps the toolbar as a filled footer under a rule; "ghost" makes the whole card one writing surface with the controls floating on it.

Accessibility

Enter submits, Shift+Enter for newline
Submit button is keyboard accessible
Loading state prevents duplicate submissions

Guidance

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)

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

Next steps

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