block · field

Field and validation

A native field composition for labels, descriptions and application-owned validation messages.

Install with npx @madojs/ui@latest add field.

Block

Workspace name (required)

Used in project URLs and release summaries.

Account ID

Read-only values remain available to form submission.

Managed workspace

Disabled values are unavailable and omitted from submission.

Release notifications

Native choices keep their own checked and disabled behavior.

Email summaries Receive one message after each production release. Managed channel Available when an administrator configures a channel.

The field form has not been submitted.

Composition

Group a visible label, one native control, supporting description and conditional error. Use fieldset/legend for related choices.

class mado-ui-field / label / description / error: Single-control field composition.
class mado-ui-fieldset / mado-ui-field-legend: Native related-control grouping.
attribute data-invalid: Visual hook on the field wrapper; it does not set control validity.
attribute aria-invalid / aria-describedby: Application-owned control state and description/error references.

The label uses for/id or native wrapping, and every referenced description/error id must exist while referenced.
Expose an error only after the chosen validation lifecycle; include useful text rather than relying on color.

The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Validation keeps focus on the invalid control or moves it deliberately after submit; the wrapper and messages remain outside Tab order.

Without the copied stylesheet, the semantic source HTML remains readable and operable.

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.