Table of Contents

Class TwTextfield<T>

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Represents a generic text input field component that supports two-way data binding.

public class TwTextfield<T> : TwBlazorTextInputComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent, ITwInputComponent

Type Parameters

T

The type of value bound to the text field. Common types include string, int, decimal, and DateTime.

Inheritance
TwTextfield<T>
Implements
Inherited Members

Remarks

The TwTextfield component is a flexible input control that supports various input types (text, password, email, number, etc.) and provides customizable styling for both the input field and its label. It implements two-way binding through the Value and ValueChanged parameters, allowing seamless integration with Blazor's @bind directive. The component can be configured to trigger data binding on different DOM events using the BindEvent parameter.

Constructors

TwTextfield() 

public TwTextfield()

Properties

BindEvent

Gets or sets the name of the DOM event that triggers data binding for the associated element.

[Parameter]
public string BindEvent { get; set; }

Property Value

string

Remarks

The default value is "onchange", which binds on input changes. Set this property to a different event name (such as "oninput") to change when data binding occurs. The value should correspond to a valid DOM event for the element.

InputRef

Reference to the rendered <input> element itself. Lets consumers (e.g. picker components with a decorative trigger icon that sits ahead of the input in DOM order) focus this specific element directly, rather than searching a wider container where the first focusable descendant found might not be this input.

public ElementReference InputRef { get; }

Property Value

ElementReference

InputType

Gets or sets the type of input expected by the control.

[Parameter]
public string InputType { get; set; }

Property Value

string

Remarks

Common values include "text", "password", "email", and "number". The value determines how the input is rendered and what kind of data is accepted.

OnFocus

Gets or sets the callback that is invoked when the textfield is focused.

[Parameter]
public EventCallback<FocusEventArgs> OnFocus { get; set; }

Property Value

EventCallback<FocusEventArgs>

Placeholder

Gets or sets the placeholder text displayed when the input field is empty.

[Parameter]
public string Placeholder { get; set; }

Property Value

string

Validator

Gets or sets an optional asynchronous validator invoked with the new value whenever it changes.

[Parameter]
public Func<T, Task<string?>>? Validator { get; set; }

Property Value

Func<T, Task<string>>

Remarks

Return null or an empty string to mark the value valid. Return a non-empty string to mark the field invalid (see Invalid) and display it as the error message below the input (see ErrorMessage). The validator runs after ValueChanged is invoked, so consumers of this callback see the raw value before validation has been applied. Because the validator returns a Task<TResult>, it can perform asynchronous work such as an API call (e.g. checking whether a username is already taken) without blocking the UI thread.

Value

Gets or sets the current value of the text field.

[Parameter]
public T Value { get; set; }

Property Value

T

Remarks

This property works in conjunction with ValueChanged to support two-way binding. The type parameter T determines what type of value the text field accepts and emits.

ValueChanged

Gets or sets the callback that is invoked when the value of the text field changes.

[Parameter]
public EventCallback<T> ValueChanged { get; set; }

Property Value

EventCallback<T>

Remarks

This callback is invoked based on the event specified by BindEvent (default is "onchange"). It enables two-way data binding when used with the @bind-Value directive in Blazor.

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

OnParametersSet()

Invoked when the component's parameters have been set. Ensures that the component has a unique identifier by generating one if none is provided.

protected override void OnParametersSet()

Remarks

If the component's identifier is not set, a unique ID is generated based on the component's type name (with a 'Tw' prefix removed if present) and a GUID. This helps ensure that each component instance can be uniquely identified, which is useful for scenarios such as associating labels with form elements or targeting elements in client-side scripts.

Edit this page