Prompt

Setup

import { Prompt } from '@usefragments/ui';

Loading preview...

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)
`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`	`enumdefaultfixedsticky`	`default`	Visual/positioning variant
`appearance`	`enumpanelseamless`	`panel`	How the card is divided up. "panel" keeps the toolbar as a filled footer under a rule; "seamless" makes the whole card one writing surface with the controls floating on it.

Always provide an onSubmit handler
Use loading state during API calls
Prompt.Textarea forwards native textarea props (autoComplete, inputMode, aria-*, data-*, handlers)
Prompt.Textarea composes your onChange/onKeyDown handlers with built-in submit and auto-resize behavior
Use appearance="seamless" for agent composers where the controls should float on the writing surface rather than sit in a footer
Seamless controls share the dense 32px token scale with body-sized labels and standard glyphs so mixed Prompt.Select, Prompt.Attach and Prompt.Submit rows remain optically aligned
Seamless secondary controls keep transparent hover and open states so they read as inline tools; only Prompt.Submit carries a persistent filled shape
Seamless Prompt.Submit mirrors the trailing ink gutter established by Prompt.Attach at the leading edge
Prompt.Submit uses a neutral inverse surface by default so the primary action stays visible without consuming semantic brand color
Use Prompt.ModeButton for a setting you toggle and Prompt.Select for one you pick from a list
Wire onFiles once: the attach button, pasting a screenshot and dropping on the card all go through it
Render Prompt.Attachments above Prompt.Textarea — attachments are part of the message, not a setting on it
Consider showing usage/token limits for AI contexts

Accessibility