Form

<NaviusForm OnSubmit="HandleSubmit">
    <NaviusField Name="email">
        <NaviusFieldLabel>Email</NaviusFieldLabel>
        <NaviusFieldError Match="valueMissing">Please enter your email</NaviusFieldError>
        <NaviusFieldError Match="typeMismatch">Enter a valid email address</NaviusFieldError>
        <NaviusFieldControl type="email" required placeholder="you@@example.com" />
    </NaviusField>

    <NaviusFormSubmit>Create account</NaviusFormSubmit>
</NaviusForm>

@code {
    private void HandleSubmit() { /* fires only when every field is valid */ }
}

Features

• Renders a native <form>; Enter-to-submit and tab order come for free.
• Surfaces the browser's built-in ValidityState (valueMissing, typeMismatch, …) with zero validation code.
• Messages register into aria-describedby while shown and clear when they stop matching.
• Custom predicates via MatchFn can validate one field against another using FormData.
• Server errors via ServerInvalid that auto-clear on the next edit.
• An invalid submit is blocked and focus moves to the first invalid control automatically.

Installation

Install the brain, or copy just this primitive in with the CLI.

navius add form

Anatomy

Import the parts and assemble them.

@using Navius.Primitives.Components.Form
@using Navius.Primitives.Components.Field

<NaviusForm>
    <NaviusField Name="...">
        <NaviusFieldLabel />
        <NaviusFieldControl />
        <NaviusFieldError />
        <NaviusFieldValidity />
    </NaviusField>

    <NaviusFormSubmit />
</NaviusForm>

API Reference

Root

Wraps the whole form. Renders a native form element and manages the submit, validation and focus flow.

Field

Groups a label, control and messages under one name. Renders a div.

Data attributes

Label

The field's label. Renders a native label whose for points at the control.

Data attributes

Control

The form control. Renders a native input wired with the field id and aria-* by default, or cascades ControlProps to a custom control via the render-fragment child.

Data attributes

Error

A validation message tied to a match. Renders a div only while its match fails, and joins aria-describedby while shown.

Data attributes

Validity

Render-prop exposing the field's live FieldValidity. Renders nothing itself.

Submit

The form's submit button. Renders a native button with type=submit.

Data attributes

Accessibility

Built on the native <form>, <label> and form controls, so the browser's own constraint-validation and accessibility semantics apply. The label's for points at the control id; active messages are referenced by aria-describedby; and an invalid control carries aria-invalid="true". A failed submit moves focus to the first invalid control.

Keyboard interactions