Skip to main content

​
Overview

The TextArea widget provides multi-line text editing capabilities with 2D cursor positioning and optional word wrapping. It’s designed for longer text input like code editors or message composers.

​
Constructor

const textarea = new TextArea(options?: TextAreaOptions);

​
TextAreaOptions

​
width
string | number
Width of the textarea. Accepts:
  • Number: fixed width in cells
  • String: percentage (e.g., "50%") or "auto"
​
height
string | number
Height of the textarea. Accepts:
  • Number: fixed height in rows
  • String: percentage (e.g., "100%") or "auto"
​
wrap
boolean
Enable word wrapping. When true, long lines wrap to the next line automatically.Default: false (horizontal scrolling)
​
fg
string | number
Foreground (text) color. Accepts:
  • Hex string: "#FF0000"
  • Color name: "red", "blue", etc.
  • 256-color code: 196
​
bg
string | number
Background color. Same format as fg.
​
border
string
Border style. Valid values:
  • "none" - no border
  • "single" - single-line border
  • "double" - double-line border
  • "rounded" - rounded corners
  • "bold" - bold border

​
Methods

​
setValue()

Set the entire text content. 
setValue(text: string): void
​
text
string
The text content to set. Can include newlines (\n) for multiple lines.
Source: ts/src/widgets/textarea.ts:30

​
getValue()

Get the current text content. 
getValue(): string
​
return
string
The complete text content including newlines.
Source: ts/src/widgets/textarea.ts:36

​
setCursor()

Set the 2D cursor position. 
setCursor(row: number, col: number): void
​
row
number
Zero-based row number. Will be clamped to valid range [0, lineCount-1].
​
col
number
Zero-based column number. Will be clamped to line length.
Source: ts/src/widgets/textarea.ts:47

​
getCursor()

Get the current cursor position. 
getCursor(): { row: number; col: number }
​
return
object
Object containing:
  • row - Zero-based row number
  • col - Zero-based column number
Source: ts/src/widgets/textarea.ts:54

​
getLineCount()

Get the total number of lines. 
getLineCount(): number
​
return
number
Number of lines in the textarea. Always at least 1.
Source: ts/src/widgets/textarea.ts:64

​
setWrap()

Enable or disable word wrapping. 
setWrap(enabled: boolean): void
​
enabled
boolean
true to enable word wrapping, false for horizontal scrolling.
Source: ts/src/widgets/textarea.ts:70

​
Examples

import { TextArea } from "kraken-tui";

const textarea = new TextArea({
  width: "100%",
  height: 20,
  border: "rounded",
  wrap: true,
});

// Set initial content
textarea.setValue("Line 1\nLine 2\nLine 3");

// Get current content
const content = textarea.getValue();

​
Inherited Methods

TextArea inherits all methods from the Widget base class, including:
  • setVisible(visible) - Control visibility
  • setForeground(color) - Set text color
  • setBackground(color) - Set background color
  • setBorderStyle(style) - Change border style
  • destroy() - Clean up resources
See the Widget API reference for the complete list.

​
Event Handling

TextArea widgets respond to keyboard events:
  • Key events - Character input, backspace, delete, newlines
  • Navigation - Arrow keys, page up/down, home/end
  • Editing - Cut, copy, paste (platform-dependent)
Listen for events using app.drainEvents() in your event loop.

​
Notes

  • TextArea supports multi-line editing with 2D cursor positioning
  • Cursor position is automatically clamped to valid ranges
  • Word wrapping mode can be toggled at runtime using setWrap()
  • Line count is updated automatically as content changes
  • Use setValue() to replace all content; content is preserved across render cycles
  • TextArea widgets cannot have children
  • For single-line input, use Input instead

Build docs developers (and LLMs) love

Get started for freeTalk to us