PromptBoxProps

Premium

Updated on Feb 5, 2026

Represents the props of the PromptBox component.

Name	Type	Default	Description
actionButtonConfig?	boolean | ButtonProps	true	Sets the send button visibility and/or settings. tsx <PromptBox actionButtonConfig={{ themeColor: 'primary', rounded: 'full' }} />
attachments?	UploadFileInfo[]		Sets the attachments for controlled file management. When provided, the component operates in controlled mode and the developer must manage attachments via onSelectAttachments and onRemoveAttachment. When not provided, the component manages attachments internally (uncontrolled mode).
defaultValue?	string		The default value of the PromptBox (uncontrolled mode). tsx <PromptBox defaultValue="Type your message..." />
disabled?	boolean	false	Sets the disabled state of the PromptBox component. tsx <PromptBox disabled={true} />
endAffix?	ReactNode | (props: AffixTemplateProps) => ReactNode		Custom content rendered at the end of the input element. In 'multi' and 'auto' with more than one row, it is rendered at the bottom right of the textarea. Custom content appears BEFORE built-in buttons. tsx <PromptBox uploadButtonConfig={false} speechToTextButtonConfig={false} actionButtonConfig={false} endAffix={(props) => ( <> <PromptBoxActionButton {...props.actionButtonProps} /> <PromptBoxUploadButton {...props.uploadButtonProps} /> <PromptBoxSpeechToTextButton {...props.speechToTextButtonProps} /> </> )} />
fillMode?	"flat" | "solid" | "outline"	undefined (theme-controlled)	Configures the fillMode of the PromptBox. The available options are: solid outline flat tsx <PromptBox fillMode="outline" />
inputAttributes?	React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>		Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed. tsx <PromptBox inputAttributes={{ 'aria-label': 'Prompt input' }} />
loading?	boolean	false	Specifies whether the Send button is transformed to a stop generation button. tsx <PromptBox loading={true} />
maxLength?	number		Sets the maximum number of characters allowed in the text input element. tsx <PromptBox maxLength={500} />
maxTextAreaHeight?	string		Sets the maximum height of the native textarea in px. When the text height exceeds this value, a scrollbar appears. Applicable for multi and auto modes. tsx <PromptBox mode="auto" maxTextAreaHeight="300" />
mode?	PromptBoxMode	'auto'	Sets the line mode for the PromptBox component. The available options are: single - Sets one line for the text input multi - Multi-line textarea auto - Transforms the PromptBox from single to multi line mode based on content tsx <PromptBox mode="multi" />
onBlur?	(event: PromptBoxBlurEvent) => void		The event handler that will be fired when the PromptBox is blurred. tsx <PromptBox onBlur={(event) => console.log('Blurred')} />
onChange?	(event: PromptBoxChangeEvent) => void		The event handler that will be fired when the value changes. tsx <PromptBox onChange={(event) => console.log(event.value)} />
onFocus?	(event: PromptBoxFocusEvent) => void		The event handler that will be fired when the PromptBox is focused. tsx <PromptBox onFocus={(event) => console.log('Focused')} />
onPromptAction?	(event: PromptBoxPromptActionEvent) => void		Fires when the user clicks the Action button. The event provides the current value and attachments, allowing simple uncontrolled usage. tsx // Uncontrolled - access value and attachments from event <PromptBox onPromptAction={(e) => { console.log('Message:', e.value); console.log('Attachments:', e.attachments); sendMessage(e.value, e.attachments); }} /> // Controlled - use your own state <PromptBox value={value} attachments={attachments} onPromptAction={(e) => { sendMessage(value, attachments); }} />
placeholder?	string	''	The hint, which is displayed when the text input element is empty. tsx <PromptBox placeholder="Type your message here..." />
readOnly?	boolean	false	Sets the read-only state of the PromptBox component. tsx <PromptBox readOnly={true} />
rows?	number	1	Sets the visible height of the internal textarea in lines. Only applicable when mode is 'multi'. This sets the minimum number of rows. tsx <PromptBox mode="multi" rows={5} />
speechToTextButtonConfig?	boolean | SpeechToTextButtonProps	true	Sets the SpeechToText button visibility and/or settings. tsx <PromptBox speechToTextButtonConfig={true} />
startAffix?	ReactNode | (props: AffixTemplateProps) => ReactNode		Custom content rendered at the start of the input element in single line mode. In 'multi' and 'auto' with more than one row, it is rendered at the bottom left of the textarea. tsx <PromptBox startAffix={(props) => <Button icon="custom" />} />
title?	string	''	Sets the title attribute of the internal text input element of the component. tsx <PromptBox title="Enter your prompt" />
topAffix?	ReactNode | (props: AffixTemplateProps) => ReactNode		Custom content rendered at the top of the PromptBox. Only rendered when mode is 'multi' or when 'auto' mode has more than 1 row. tsx <PromptBox topAffix={(props) => <div>Custom content</div>} />
uploadButtonConfig?	boolean | UploadButtonProps	false	Sets the File Attachments button visibility and/or settings. tsx <PromptBox attachments={attachments} uploadButtonConfig={false} startAffix={(props) => ( <PromptBoxUploadButton {...props.uploadButtonProps} onSelectAttachments={(e) => setAttachments(e.allFiles)} onRemoveAttachment={(fileName) => setAttachments(prev => prev.filter(f => f.name !== fileName))} /> )} />
value?	string	''	Sets the value for the internal input/textarea of the PromptBox. tsx <PromptBox value="Hello, how can I help you?" />