Components / Field

Field

A form-field wrapper that groups a label, a control, a muted description, and an error message into one consistently-spaced block. Pure Tailwind; no behaviour required.

Examples

Wrap a ZitsFieldLabel and a control. The label's For wires to the control's id.

razor

<ZitsField>
    <ZitsFieldLabel For="email">Email</ZitsFieldLabel>
    <ZitsInput id="email" type="email" placeholder="you@example.com" />
</ZitsField>

Description

Add a ZitsFieldDescription for muted helper text below the control.

Username

This is your public display name.

razor

<ZitsField>
    <ZitsFieldLabel For="username">Username</ZitsFieldLabel>
    <ZitsInput id="username" placeholder="lzitser23" />
    <ZitsFieldDescription>This is your public display name.</ZitsFieldDescription>
</ZitsField>

Error

Set data-invalid="true" on the Field to turn the label and description destructive, and render a ZitsFieldError.

Password

Password must be at least 8 characters.

razor

<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>

Installation

Terminal bash

navius add field

API reference

ZitsField and its parts each take ChildContent plus splatted attributes.

Component	Element	Purpose
ZitsField	div[role=group]	Vertical wrapper; `data-invalid` drives destructive styling.
ZitsFieldLabel	label	The control's label (For wires to the control id).
ZitsFieldContent	div	Optional wrapper for the control(s).
ZitsFieldDescription	p	Muted helper text.
ZitsFieldError	div[role=alert]	Validation message; renders nothing when empty.