Elements

TextField

An input field element for collecting user text input. Supports placeholder text, password mode, multiline mode, and read-only state.

Constructor

new TextField();
new TextField(observable); // Bound to observable

Examples

Two-Way ReactiveProperty Binding

TextFields provide automatic two-way binding with ReactiveProperty:

// Constructor binding (preferred)
new TextField(ViewModel.UserInput)
    .Placeholder("Enter your name...");

// Explicit binding
new TextField()
    .BindText(ViewModel.UserInput)
    .Placeholder("Enter your name...");

// When user types, ViewModel.UserInput.Value updates automatically
// When ViewModel.UserInput.Value changes, the field updates

Form Fields

Common form field patterns:

// Password field
new TextField(ViewModel.Password)
    .Password(true)
    .Placeholder("Enter password");

// Email field with validation
new TextField(ViewModel.Email)
    .Placeholder("Enter email address")
    .BindClassName("error", ViewModel.HasEmailError);

// Multiline text area
new TextField(ViewModel.Description)
    .Multiline(true)
    .Placeholder("Enter description...");

Reactive State Management

Fields can respond to ViewModel state:

// Read-only state based on permissions
new TextField(ViewModel.ApiKey)
    .BindReadOnly(ViewModel.IsReadOnly)
    .BindClassName("readonly", ViewModel.IsReadOnly);

// Dynamic placeholder based on context
new TextField(ViewModel.SearchQuery)
    .BindPlaceholder(ViewModel.SearchContext.Select(context => 
        $"Search {context}..."));

Properties

PropTypeDefault
text?
string
""
placeholder?
string
""
password?
bool
false
multiline?
bool
false
readOnly?
bool
false
disabled?
bool
false
visible?
bool
true
name?
string
""
pickingMode?
PickingMode
PickingMode.Position

Methods

PropTypeDefault
Text?
(string) => TextField
-
GetText?
() => string
-
BindText?
(Observable<string>) => TextField
-
Placeholder?
(string) => TextField
-
GetPlaceholder?
() => string
-
BindPlaceholder?
(Observable<string>) => TextField
-
Password?
(bool = true) => TextField
-
GetPassword?
() => bool
-
BindPassword?
(Observable<bool>) => TextField
-
Multiline?
(bool = true) => TextField
-
GetMultiline?
() => bool
-
BindMultiline?
(Observable<bool>) => TextField
-
ReadOnly?
(bool = true) => TextField
-
GetReadOnly?
() => bool
-
BindReadOnly?
(Observable<bool>) => TextField
-
Disabled?
(bool = true) => TextField
-
GetDisabled?
() => bool
-
BindDisabled?
(Observable<bool>) => TextField
-
Visible?
(bool) => TextField
-
GetVisible?
() => bool
-
BindVisible?
(Observable<bool>) => TextField
-
ClassName?
(string, bool = true) => TextField
-
BindClassName?
(string, Observable<bool>) => TextField
-
StyleSheet?
(StyleSheet) => TextField or (string) => TextField
-

TextField extends BaseElement.