Form Field Input
A pre-composed form field that wraps an InputField control with automatic label, helper text, and error message display. Inherits from FormFieldBase, which provides EditContext integration, auto-generated control IDs, ARIA attribute wiring, and validation error state management. Generic over TValue for typed input binding (string, int, decimal, DateTime, etc.).
Default
A basic
FormFieldInput with a string value. The component wraps InputField inside a Field layout with a label and optional helper text, all wired for accessibility.Value: (null)
Multiple Types
The component supports many types out of the box including
int, decimal, DateTime, and nullable variants. Each type uses the InputConverter system for automatic parsing and formatting.Must be a whole number.
Decimal values accepted.
Format: yyyy-MM-dd
Validation
Use
ValidationPattern for regex pre-validation on raw input and Validation for post-parse value validation. Error messages are generated automatically based on the error kind (parse, pattern, or value validation).Must be between 1 and 120.
5-digit US zip code.
With Error
Use
ErrorText to manually set an error message. When the field is invalid, helper text is hidden and replaced by the error. For EditForm integration, validation errors display automatically from DataAnnotationsValidator.Please enter a valid email address.
Update Timing
Control when
ValueChanged fires using UpdateTiming. Immediate fires on every keystroke, OnChange fires on blur, and Debounced fires after a configurable pause.Fires on blur.
Value: (null)
Fires after 300ms pause.
Value: (null)
Disabled
Set
Disabled to true to prevent interaction. The input displays with reduced opacity and a not-allowed cursor.Custom Variant
Use
InputClass to apply custom Tailwind CSS classes to the inner input and Class to style the outer field container. This lets you create project-specific styles without building a new component.EditForm Validation
Inside an
EditForm, validation errors from DataAnnotationsValidator display automatically. Try submitting with empty or invalid fields.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. |