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 observableExamples
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 updatesForm 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
| Prop | Type | Default |
|---|---|---|
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
| Prop | Type | Default |
|---|---|---|
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.