Input Field
A generic typed input with automatic type conversion, display formatting, validation, parse error handling, and configurable update timing. Supports int, decimal, DateTime, Guid, and custom types.
Default
A basic integer input using
InputField with @bind-Value for two-way binding. The component automatically converts between string input and the specified TValue type, with built-in support for common numeric and date types.Value: 0
Multiple Types
The
InputField supports many types out of the box including int, decimal, DateTime, and Guid. Each type uses an appropriate built-in converter from the InputConverter system. Nullable variants (e.g., int?, DateTime?) are also supported.Value: 0
Value:
Value:
Display Formatting
Use the
Format parameter to control how values display when the input is not focused. While editing (focused), the raw value is shown for precise input. On blur, the formatted value is displayed using IFormattable.ToString(format). Format only affects display — parsing always uses the converter.Raw value: 1234.5
Raw value: 02/08/2026 00:00:00
Validation
Combine
ValidationPattern for regex pre-validation on raw input with Validation for post-parse value validation. The OnParseError callback fires on blur when the input cannot be parsed, providing the raw input and target type for error messaging.Value:
Update Timing
Control when
ValueChanged fires using UpdateTiming. The default is Immediate (fires on every keystroke, as shown in all examples above). OnChange fires only on blur or Enter — useful for fields where intermediate values shouldn't trigger side effects. Debounced fires after the user stops typing for DebounceInterval milliseconds (default 500ms) — ideal for search inputs.Value: (null)
Value: (null)
Value: (null)
Disabled
Set
Disabled to true to prevent user interaction. The input displays reduced opacity and a not-allowed cursor.Custom Variant
Use the
Class parameter to apply custom Tailwind CSS classes for project-specific styles such as accent colors, border radii, or sizing. This lets you extend the base input without creating a new component.Settings Form
A real-world settings form using
InputField with typed values, display formatting, and labels inside a Card.Product Settings
Configure the product details.
Public Methods
Use a component reference (@ref) to call this method programmatically.
| Method | Returns | Description |
|---|---|---|
| FocusAsync() | ValueTask | Moves keyboard focus to the underlying input element. Call via @ref — no JS interop needed. |
The component also exposes a public Element property of type ElementReference that points at the underlying input element, for advanced JS interop scenarios.