@comma-agents/tuiComponents
TextAreaInput
Multi-line text input with word wrap, scrollbar, and mouse wheel support.
TextAreaInput
A controlled multi-line text area for terminal input. Handles word wrapping, cursor movement, scrolling, and mouse wheel events. Submit with Meta+Enter.
import { TextAreaInput } from "@comma-agents/tui";
<TextAreaInput
value={text}
onChange={setText}
placeholder="Enter your prompt..."
onSubmit={(value) => console.log(value)}
/>TextAreaInputProps
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | -- | Current text value (controlled) |
onChange | (value: string) => void | -- | Called when the text value changes |
width | number | string | 80 | Width in columns or CSS-like string (e.g. "100%") |
height | number | 10 | Visible row count |
placeholder | string | "Type here..." | Placeholder shown when value is empty |
focus | boolean | true | Whether the input is focused and accepts keystrokes |
onSubmit | (value: string) => void | -- | Called on Meta+Enter with the trimmed value |
Word Wrapping
Text wraps at the measured box width. The component uses measured dimensions to determine the actual rendered column count. Cursor position tracks an absolute offset, and the wrap() function splits text into display lines with parallel offset arrays.
Scrolling
When content exceeds the visible height, a scrollbar gutter appears on the right. On focus, the component enables SGR mouse mode and intercepts scroll events from stdin. Mouse mode is disabled on blur or unmount.
Keyboard Shortcuts
| Key | Action |
|---|---|
| Arrow keys | Move cursor (left/right by character, up/down by display line) |
| Enter | Insert newline |
| Meta+Enter | Submit the current value |
| Backspace/Delete | Delete character before cursor |