Primitive

Field

Form chrome primitive for label, description, helper, validation, and counts.

Field owns field-level hierarchy only. It does not own input state or validation logic; compose it around the primitive or component that owns the control.
form
DOM renderImage render
FieldDefault
Canonical field hierarchy for dense product forms.
Use lowercase letters and hyphens.

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Label, description, helper, and composed control.
Canonical field hierarchy for dense product forms.
Use lowercase letters and hyphens.
Render state

Requirements

Required and optional metadata placement.
Required configuration for production agents.
Optional
Optional routing hint for generated drafts.
Render state

Error

Error message and status treatment.
Canonical field hierarchy for dense product forms.
The workspace handle is already taken.
Render state

Success

Positive validation message.
Canonical field hierarchy for dense product forms.
Looks available.
Render state

Count

Count and limit metadata.
Canonical field hierarchy for dense product forms.
42 / 64
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
labelReactNode-Primary field label.
descriptionReactNode-Supporting copy below the label.
helpReactNode-Neutral helper message.
errorReactNode-Error message and error status source.
successReactNode-Success message and success status source.
requiredbooleanfalseMarks the label as required.
optionalbooleanfalseShows optional label metadata.
countnumber-Current character or item count.
limitnumber-Maximum character or item count.