PromptInput
The chat composer: an auto-growing textarea with a send button that flips to a stop button while a response streams. Enter sends (Shift+Enter for a newline, IME-safe), and opt-in attachments support the paperclip picker, clipboard paste, and drag-and-drop over the shared file-intake core.
Submitted messages appear here. With Busy on, the send button becomes a stop button and Enter no longer submits.
01 Examples
Chat composer with stop
Attachments with validation
Model picker in the trailing zone
02 Accessibility
Built-in ARIA
The textarea carries an aria-label (the label prop, default "Message") and aria-keyshortcuts that reflects the active submit gesture — Enter for submitOn="enter", or Meta+Enter Control+Enter for mod-enter — so assistive tech announces the
real keystroke. The send, stop, and attach buttons each have their own aria-label (sendLabel / stopLabel / attachLabel). Attachment thumbnails are decorative
and hidden from screen readers.
Error status region
The inline error (first attachment rejection) lives in a role="status" region that the textarea references via aria-describedby. It stays sr-only while empty, so the message is announced when it appears and the region never leaves a visual
gap. It clears on the next successful add.
Chip removal & focus
Each attachment chip's remove button is labelled via removeAttachmentLabel(name). Removing a chip moves
focus deterministically — to the chip that shifted into its place, else the last remaining
chip, else back to the textarea when the strip empties — so keyboard users are never
dropped to <body>. Removing a chip through
the UI also revokes its preview object-URL for you.
Keyboard & IME
Enter sends (or inserts a newline under submitOn="mod-enter"); Shift + Enter always inserts a newline. Submission is suppressed mid-IME-composition, so composing Japanese,
Chinese, or Korean text never fires a stray send. Focus rings use focus-visible: for keyboard-only visibility.
03 API Reference
No matching properties |