TextFieldComponent class Component

A focusable, hoverable, and editable text input component for terminal/canvas UIs.

The TextFieldComponent displays a single-line input area with optional styles for normal text, placeholder text, and hover/focus states.

It supports:

  • Custom styling for text, placeholder, and hover states.
  • Placeholder text when the field is empty.
  • Max width control.
  • Callbacks for text changes and submission.
  • Obscured mode for password fields.
  • Arrow key navigation and backspace support.

Example

final textField = TextFieldComponent(
  initialText: "Hello",
  maxWidth: 30,
  placeHolder: "Type something...",
  textStyle: TextComponentStyle().foreground(ColorRGB(255, 255, 255)),
  placeHolderStyle: TextComponentStyle().foreground(ColorRGB(128, 128, 128)),
  hoverStyle: TextComponentStyle().bold(),
  onChanged: (value) => print("Changed: $value"),
  onSubmitted: (value) => print("Submitted: $value"),
);

Styling

Interaction

  • Focus: The field shows a "|> " prefix when focused.
  • Hover: Hover style applies when the pointer or cursor is over the field.
  • Typing: Input is appended at the cursor position.
  • Submission: Pressing Enter triggers onSubmitted.
  • Navigation: Left/Right arrows move the cursor; Backspace deletes before cursor.

See also:

Inheritance

Constructors

TextFieldComponent.new({dynamic onChanged(String)?, dynamic onSubmitted(String)?, String? initialText, AnsiColorType? foreground, AnsiColorType? background, TextComponentStyle? textStyle, String? placeHolder, TextComponentStyle? placeHolderStyle, TextComponentStyle? hoverStyle, bool obsecure = false, int maxWidth = 20})
Creates a text field component for user input.
const

Properties

background AnsiColorType?
Background color.
final
foreground AnsiColorType?
Foreground (text) color.
final
hashCode int
The hash code for this object.
no setterinherited
hoverStyle TextComponentStyle?
Style applied when hovered or focused.
final
initialText String?
Initial text content of the field.
final
maxWidth int
Maximum width of the text field (in characters).
final
obsecure bool
If true, masks the text (for passwords).
final
onChanged → dynamic Function(String)?
Callback when the text changes.
final
onSubmitted → dynamic Function(String)?
Callback when the user presses Enter.
final
padding EdgeInsets
The padding inside the component’s layout bounds.
finalinherited
placeHolder String?
Placeholder text displayed when empty.
final
placeHolderStyle TextComponentStyle?
Style for placeholder text.
final
position Position?
The position of the component within its parent or layout.
finalinherited
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
textStyle TextComponentStyle?
Style for entered text.
final

Methods

createInstance() ComponentInstance
Creates a ComponentInstance that can be rendered.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() String
A string representation of this object.
inherited

Operators

operator ==(Object other) bool
The equality operator.
inherited