Text widgets

Widgets for typing and editing values. Full method lists: Text API. XML attributes and events: tag reference.

Widget	What it is	Constructor	Two-way binding
TextInput	A one-line text field with caret, selection, clipboard, placeholder, max length and password mode.	new TextInput(name, family, size)	bindValue(Ref<string>)
TextArea	A multi-line editor; setRows(n) sets its visible height.	new TextArea(name, family, size)	bindValue(Ref<string>)
MaskedInput	A field that follows a pattern, for dates, codes or phone numbers; setMask, setMaskPlaceholder.	new MaskedInput(name, family, size)	bindValue, bindRawValue
InputField	A TextInput with a label above or to the left, a required marker and a validation state and message.	new InputField(name, family, size)	bindValue(Ref<string>)
SearchBox	A field with a search icon, a clear button and a debounced change callback.	new SearchBox(name, family, size)	bindValue(Ref<string>)
NumberStepper	A number field with up and down buttons; setMin, setMax, setStep, setPageStep, setDecimals.	new NumberStepper(name, family, size)	bindValue(Ref<float>)
Tag	A chip with text, optionally removable or selectable.	new Tag(name, family, size)
TagBar	A field that turns typed entries into tags; addTag(text).	new TagBar(name, family, size)
ColorPicker	A swatch that opens a picker with hex, RGB, HSV, HSL and float modes, and optional alpha.	new ColorPicker(name, family, size)	bindValue(Ref<Color>)

Callbacks: text fields have setOnChange, setOnSubmit (Enter) and setOnBlur; SearchBox adds setOnClear; ColorPicker has setOnChange while dragging and setOnCommit when the choice is final; Tag has setOnRemove and setOnToggle.

InputField validation: setValidationState(VALIDATION_ERROR) (or VALIDATION_WARNING, VALIDATION_SUCCESS, VALIDATION_NONE) with setValidationMessage("..."). Label placement: LABEL_ABOVE or LABEL_LEFT.

Example

import { DEFAULT_STAGE, LAYOUT_VBOX, Label, NumberStepper, Panel, Ref, Screen, TextInput, computed } from "willowui";

const screen: Screen = new Screen();
const form: Panel = new Panel("form");
form.layout = LAYOUT_VBOX;
form.spacing = 10.0;
form.setPosition(40.0, 40.0);

const heroName: Ref<string> = new Ref<string>("");
const nameField: TextInput = new TextInput("name", "default", 16.0);
nameField.setWidth(260.0);
nameField.setPlaceholder("Hero name");
nameField.bindValue(heroName);
form.addChild(nameField);

const level: Ref<float> = new Ref<float>(1.0);
const stepper: NumberStepper = new NumberStepper("level", "default", 16.0);
stepper.setMin(1.0);
stepper.setMax(99.0);
stepper.bindValue(level);
form.addChild(stepper);

const preview: Label = new Label("preview", "", "default", 16.0);
const summary: Ref<any> = computed((): any => (heroName.value == "" ? "Nameless" : heroName.value) + ", level " + level.value);
preview.bindText(summary as Ref<string>);
form.addChild(preview);

form.sizeToContent();
screen.add(form);
DEFAULT_STAGE.setScene(engine.root2d);
DEFAULT_STAGE.add(screen);
App.onFrame((dt: float): void => { DEFAULT_STAGE.update(dt); });