Skip to main content

​
Overview

The Input widget provides single-line text entry with cursor management and optional password masking. It handles basic text editing operations and emits events for user input.

​
Constructor

const input = new Input(options?: InputOptions);

​
InputOptions

​
width
string | number
Width of the input field. Accepts:
  • Number: fixed width in cells
  • String: percentage (e.g., "50%") or "auto"
​
height
string | number
Height of the input field. Typically set to 1 or 3 (with border).
​
maxLength
number
Maximum number of characters allowed. No limit if not specified.
​
mask
string
Character to display instead of actual input (for password fields).Example: "*" or "•"
​
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

​
getValue()

Get the current input value. 
getValue(): string
​
return
string
The current text content of the input field.
Source: ts/src/widgets/input.ts:32

​
getCursor()

Get the current cursor position. 
getCursor(): number
​
return
number
Zero-based cursor position (character index).
Source: ts/src/widgets/input.ts:43

​
setCursor()

Set the cursor position. 
setCursor(position: number): void
​
position
number
Zero-based cursor position. Will be clamped to valid range [0, length].
Source: ts/src/widgets/input.ts:49

​
setMaxLength()

Set the maximum input length. 
setMaxLength(max: number): void
​
max
number
Maximum number of characters allowed. Use 0 for unlimited.
Source: ts/src/widgets/input.ts:53

​
setMask()

Enable password masking with a specific character. 
setMask(char: string): void
​
char
string
Character to display instead of actual input (e.g., "*", "•").Only the first character of the string is used.
Source: ts/src/widgets/input.ts:57

​
clearMask()

Disable password masking, showing actual input characters. 
clearMask(): void
Source: ts/src/widgets/input.ts:62

​
Examples

import { Input } from "kraken-tui";

const input = new Input({
  width: 30,
  height: 3,
  border: "single",
});

// Get current value
const value = input.getValue();

// Set cursor position
input.setCursor(0); // Move to start

​
Inherited Methods

Input 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

Input widgets respond to keyboard events:
  • Key events - Character input, backspace, delete
  • Navigation - Left/right arrows, home/end
  • Selection - Ctrl+A to select all (platform-dependent)
Listen for events using app.drainEvents() in your event loop.

​
Notes

  • Input is a single-line text field (use TextArea for multi-line)
  • Cursor position is automatically clamped to valid range
  • Password masking only affects display, not the actual stored value
  • Maximum length is enforced by the native layer
  • Input widgets cannot have children

Build docs developers (and LLMs) love

Get started for freeTalk to us