Field

Overview

Field is a five-part composite of plain elements: ZitsField (div[role=group]), ZitsFieldLabel (composes ZitsLabel, which itself wraps the Navius Label primitive), ZitsFieldContent (optional control wrapper), ZitsFieldDescription (<p>), and ZitsFieldError (div[role=alert], renders nothing when its ChildContent is empty). Setting data-invalid="true" on ZitsField turns the label and description destructive via group-data-[invalid=true]/field: selectors. Beyond the composed ZitsLabel, there is no Navius primitive underneath; the registry’s field item also bundles the Navius FieldContext/ FieldValidity/FieldValidationMode/FieldStatePayload C# types, but none of the five Zits parts reference them directly.

Install

navius add field --to ./src/MyApp --namespace MyApp.Ui

Usage

<ZitsField data-invalid="true">
    <ZitsFieldLabel For="pw">Password</ZitsFieldLabel>
    <ZitsInput id="pw" type="password" aria-invalid="true" />
    <ZitsFieldError>Password must be at least 8 characters.</ZitsFieldError>
</ZitsField>

Parts and props

Prop	Type	Default	Description
ZitsFieldError.Shake	bool	false	Opts in to a one-shot motion-shake class (Navius.Motion) when the error appears; inert unless the app links _content/Navius.Motion/navius-motion.css.

ZitsField, ZitsFieldLabel, ZitsFieldContent, and ZitsFieldDescription take only ChildContent and Attributes. ZitsFieldLabel has no explicit For parameter of its own: a For/for attribute (as in the Usage sample) splats through Attributes to the composed ZitsLabel, and from there to the Navius Label primitive’s htmlFor wiring.

Styling surface

Every part accepts class/Attributes, merged via Cn.Class/Cn.Merge with the caller’s classes applied last. There are no variant/size parameters.

Data attribute hooks

Part	Attribute	Description
Field	data-invalid	Caller-set; toggles text-destructive on the field and destructive tones on the label/description via group-data-[invalid=true]/field:.
Field	data-slot	field, field-content, field-description, field-error, present on each corresponding part for external CSS targeting.

Field wires role="group" on the root and role="alert" on ZitsFieldError (only when it has content, so it is never announced empty). ZitsFieldLabel’s For is the caller’s responsibility to match to the control’s id; the component itself does not verify the association.