Form Field
A composite form field that wraps an input with a label, help text, and error messaging.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <FormField />
This will be your public display name.
Password must be at least 8 characters.
We'll never share your email.
Async validators
Some validation has to round-trip the server — checking whether a username is taken, whether a coupon code
is still valid, whether a domain resolves. FormField.AsyncValidator
takes a Func<string?, Task<string?>>
that returns an error message (or null
for success). It runs alongside the synchronous validator and reports its state through
IsValidating.
- AsyncValidationDebounceMs (default 300) — wait this long after the last change before firing. Lets fast typists finish before you hit the API.
- AsyncValidateOn —
AsyncValidationTrigger.OnChange(default) re-runs on every change after the debounce expires;AsyncValidationTrigger.OnBlurwaits until the field loses focus. - IsValidating + OnValidatingChanged — read this to show a spinner / "Checking…" hint next to the input.
- FormContext.IsAnyFieldValidating — true while any field on the form has a pending async check. Disable the submit button on this so the user can't race a stale validation.
Try 'taken' to see the async error.
Pair this with an @bind-IsValidating
or OnValidatingChanged
handler if you want to render a spinner next to the field while the request is in flight.
API Reference
FormField
| Property | Type | Default | Description |
|---|---|---|---|
| Label | string? | — | Label text displayed above (vertical) or beside (horizontal) the input. |
| HelpText | string? | — | Helper text shown below the input. Hidden when an error is present. |
| Error | string? | — | Error message displayed below the input in destructive color. |
| Required | bool | false | Shows a red asterisk (*) next to the label. |
| Orientation | Lumeo.Orientation | Vertical | Layout direction. Values: Vertical (label above), Horizontal (label beside). |
| LabelWidth | string? | — | Fixed label width for horizontal orientation (e.g. "120px"). |
| Name | string? | — | Field name passed via cascading FormFieldContext for form integration. |