Forms and Validation in Reactor

Reactor forms use a controlled-input pattern — every input has an explicit (value, setter) pair driven by UseState. There is no two-way binding. Validation is layered on top via UseValidationContext and declarative .Validate() modifiers.

Controlled prop note: factory call sites keep the plain (value, setter) shape, but the underlying element records use Optional<T>. Read element props with .Value / .GetValueOrDefault(...); use Optional<T>.Unset only when the WinUI control should own the value. See migration/050-optional-t.md.

Quick reference

1. Controlled inputs

Every input takes (value, setter). State lives in the component:

var (name, setName) = UseState("");
var (age, setAge) = UseState(0);
var (agreed, setAgreed) = UseState(false);

return VStack(12,
    TextBox(name, setName, placeholderText: "Name"),
    NumberBox(age, setAge),
    CheckBox(agreed, setAgreed, label: "I agree"),
    Button("Submit", onSubmit).IsEnabled(!(string.IsNullOrEmpty(name) || !agreed))
);

Available input types

Named-input shapes (Spec 039 §17.3): .NumericInput() / .EmailInput() preconfigure InputScope and IME hints so on-screen / soft keyboards open in the right mode. Stack them with validators:

TextBox(email, setEmail, placeholderText: "you@example.com")
    .EmailInput()
    .MaxLength(254)
    .Validate("email", email, Validate.Required(), Validate.Email())

For modifiers that aren't in the typed surface (e.g. PasswordRevealMode, date min/max), use .Set(native => ...) to reach the underlying WinUI control. The full catalog is in references/reactor.api.txt.

2. Simple validation (derived booleans)

For trivial forms, derive validation from state:

var (email, setEmail) = UseState("");
var isValid = email.Contains('@') && email.Length > 3;

return VStack(12,
    TextBox(email, setEmail, placeholderText: "Email"),
    Button("Submit", onSubmit).IsEnabled(isValid)
);

This is fine for 1–2 fields. For anything more, use UseValidationContext.

3. UseValidationContext

Tracks per-field validation messages, touched/dirty state, and overall form validity:

var validation = this.UseValidationContext();
var (name, setName) = UseState("");
var (email, setEmail) = UseState("");

return VStack(12,
    TextBox(name, setName, placeholderText: "Name")
        .Validate("name", name,
            Validate.Required("Name is required"),
            Validate.MinLength(2, "Name too short")),

    TextBox(email, setEmail, placeholderText: "Email")
        .Validate("email", email,
            Validate.Required("Email is required"),
            Validate.Email("Invalid email")),

    Button("Submit", () =>
    {
        validation.MarkAllTouched();
        if (validation.IsValid())
            Submit(name, email);
    })
);

.Validate(fieldName, value, ...) resolves the surrounding ValidationContext through React-style ambient context — you do not pass validation explicitly. Passing the current value (the second arg) runs the validators right there, during the render, so a When(validation.HasError("email"), ...) placed after the field reads the result in the same pass rather than one render late. The validator-only overload .Validate(fieldName, ...) has no value to check, so it only records the validators: nothing runs them, and on a bare control nothing registers the field either. Inside a FormField the field is registered on mount, so MarkAllTouched() covers it.

You do not need .Provide(ValidationContexts.Current, validation): a component-local context is published to the rendered subtree automatically, so FormField, ValidationVisualizer, and nested components find it. Providing one explicitly is what descendants resolve, but it does not redirect the providing component's own .Validate() calls — those already ran while the tree was being built. To pool several components' fields into one context, provide it from a parent and let each child call UseValidationContext().

Mutating the context re-renders the component that created it. That is why MarkAllTouched() alone reveals the errors on a failed submit, even though no component state changed.

ValidationContext API

4. Built-in validators

The .Validate() modifier accepts an array of validators:

5. FormField helper

FormField wraps an input with a label, required marker, description text, and error display:

var validation = this.UseValidationContext();
var (name, setName) = UseState("");

return FormField(
    TextBox(name, setName, placeholderText: "Enter your name")
        .Validate("name", name, Validate.Required("Required")),
    label: "Full Name",
    required: true,
    description: "As it appears on your ID",
    showWhen: ShowWhen.WhenTouched  // or Always, WhenDirty, AfterFirstSubmit, Never
);

ShowWhen controls when error messages appear:

• WhenTouched — after the user has interacted with the field (recommended default). FormField marks its own field touched on blur; elsewhere call MarkTouched.
• Always — immediately, even before user interaction
• WhenDirty — only after the value has changed from its baseline. Requires SetInitialValue(field, value): with no baseline recorded a field is never dirty, so this policy stays silent forever.
• AfterFirstSubmit — only after the first submit attempt, which is MarkAllTouched(). ResetAll() clears it, so the next reveal waits for a fresh submit.

The verdict itself is unaffected by any of these — IsValid() and GetMessages() are current from the first render. ShowWhen only gates display.

6. Masked input

MaskEngine restricts and formats input as the user types:

var mask = UseMemo(() => new MaskEngine(MaskPreset.PhoneUS));
var (phone, setPhone) = UseState("");

return TextBox(phone, v => setPhone(mask.Apply(v)),
    placeholderText: "(555) 555-0123");

Mask presets

Custom masks: new MaskEngine("AA-####") where A = letter, # = digit, * = any.

7. Input formatters

InputFormatter applies format-as-you-type transformations:

var (amount, setAmount) = UseState("");

return TextBox(amount,
    v => setAmount(InputFormatter.Currency(symbol: "$").Format(v)),
    placeholderText: "$0.00");

Critical gotchas

1. Always use controlled inputs — (value, setter) pair. There is no uncontrolled / two-way binding in Reactor.
2. Call validation.MarkAllTouched() before submit — when fields use the .Validate(name, value, ...) form, validators run automatically every render, but errors stay hidden until each field is touched. Mark all registered fields touched on submit so error messages reveal at once, then gate on validation.IsValid().
3. Use ShowWhen.WhenTouched (default) — showing errors immediately on page load is hostile UX.
4. MaskEngine and InputFormatter are different — masks restrict what characters can be entered; formatters transform the display.
5. Don't mix simple validation and UseValidationContext — pick one approach per form.
6. FormField handles layout and error display — don't manually build error message TextBlocks when using FormField.