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.

DOM render JPEG render

Workspace handle

Canonical field hierarchy for dense product forms.

Use lowercase letters and hyphens.

Playground

Props in the URL.

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

Loading playground.

States

Rendered matrix.

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

Workspace handle

Canonical field hierarchy for dense product forms.

Use lowercase letters and hyphens.

Default

Label, description, helper, and composed control.

/render state

Workspace handle

Canonical field hierarchy for dense product forms.

The workspace handle is already taken.

Error

Error message and status treatment.

/render state

Workspace handle

Canonical field hierarchy for dense product forms.

Looks available.

Success

Positive validation message.

/render state

Workspace handle

Canonical field hierarchy for dense product forms.

42 / 64

Count

Count and limit metadata.

/render state

Props

Public contract.

Name	Type	Default	Description
`label`	`ReactNode`	-	Primary field label.
`description`	`ReactNode`	-	Supporting copy below the label.
`help`	`ReactNode`	-	Neutral helper message.
`error`	`ReactNode`	-	Error message and error status source.
`success`	`ReactNode`	-	Success message and success status source.
`required`	`boolean`	`false`	Marks the label as required.
`optional`	`boolean`	`false`	Shows optional label metadata.
`count`	`number`	-	Current character or item count.
`limit`	`number`	-	Maximum character or item count.