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.
• Server errors via ServerInvalid, or a form-wide Errors map keyed by field name, that auto-clear on the next edit.
• An invalid submit is blocked and focus moves to the first invalid control automatically.

Installation

Reference the Navius.Primitives package for the headless primitive, or vendor its source with the CLI: navius add copies the brain files it depends on.

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