Rich text input for the chat composer. Supports trigger menus (type @ or / to open a typeahead), inline tokens rendered as badges, message history recall with ArrowUp/Down, paste/drop file handling, and a 16px iOS font-size floor to prevent input zoom. Pass it to ChatComposer's input slot when you need more than a plain textarea.
Preview loads on approachPreview loads on approach
Exact source · chat-composer-input-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {ChatComposer, ChatComposerInput} from '@astryxdesign/core/Chat';
import {Stack} from '@astryxdesign/core/Layout';
export default function ChatComposerInputShowcase() {
return (
<Stack direction="vertical" width={450} maxWidth="100%">
<ChatComposer
onSubmit={() => {}}
input={
<ChatComposerInput placeholder="Ask me anything about Astryx..." />
}
/>
</Stack>
);
}
Usage
Pass ChatComposerInput to ChatComposer's input slot when the draft needs trigger menus, inline tokens, history recall, dictation insertion, or file intake.
Use handleRef for programmatic text or token insertion; inserted text follows the same onChange pipeline as typing.
Use onFiles for files pasted or dropped onto the editor, and keep file validation and upload progress in the product layer.
Use custom token rendering for ordinary mentions or commands; prefer the structured badge form so tokens remain predictable and themeable.
Typed props
Prop
Type and behavior
handleRef
React.Ref<ChatComposerInputHandle>
Imperative handle for programmatic control: insertToken, expandToken, insertText, focus, and getValue.
value
string
Controlled input value. Pair with onChange for two-way binding.
onChange
(value: string) => void
Called when the input value changes. The serialized string includes token placeholders.
placeholder
string · default 'Type a message...'
Placeholder text shown when the input is empty.
maxRows
number · default 8
Maximum visible rows before the input scrolls. Use a lower value in compact layouts.
triggers
ChatComposerTrigger[]
Trigger definitions for typeahead menus. Each trigger specifies a character (@ or /), a search source, and an onSelect handler that returns the token to insert.
debounceMs
number · default 150
Debounce delay for async search sources to avoid excessive network requests.
hasHistory
boolean · default true
Enable ArrowUp/Down to recall previously submitted messages.
label
string · default 'Message input'
Accessible label announced by screen readers.
isDisabled
boolean · default false
Disables the input. Use during streaming or when a prerequisite is unmet.
onPaste
(event, text) => boolean | void
Called when plain text is pasted. Return true after handling the text yourself; otherwise ChatComposerInput inserts it or applies paste-as-token behavior.
pasteAsToken
UseChatPasteAsTokenReturn | false
Paste-as-token behavior. By default, plain-text pastes over 200 characters become expandable tokens. Pass false to keep every text paste inline, or provide useChatPasteAsToken() to customize the conversion.
onFiles
(files: File[]) => void
Called when files are pasted or dropped onto the input. Use to handle attachments.
onSubmit
(value: string) => void
Called when the user presses Enter without Shift. The serialized value includes token placeholders.
onKeyDown
(event) => void
Key-down handler invoked before the built-in Enter/history behavior (after any open trigger menu). The seam for platform-specific keys: call event.preventDefault() to suppress the default submit (e.g. newline on a touch keyboard), or act on the event yourself to add behavior (e.g. submit on Cmd/Ctrl+Enter). IME composition is always respected; Enter never submits mid-composition.
Anatomy
Input root · required
The themed container that forwards the root ref and BaseProps styling seams.
Editable surface · required
The labeled contenteditable textbox or combobox that owns text, selection, keyboard, paste, and drop behavior.
Placeholder · optional
Visual guidance shown only while the serialized draft is empty.
Trigger menu · optional
The suggestion popup rendered while a configured trigger is active.
Inline token · optional
A non-editable badge or custom rendering with a stable serialized value.
