Field

A layout primitive for composing form fields with labels, descriptions and validation messages.

$bunx shadcn@latest add @nx-ui/field
Registry item
Installs withlabelseparatorutils
Used byauth-loginauth-recoveryauth-signuptransfer-note

Basic

Field wraps a control with FieldLabel and FieldDescription, keeping spacing and typography consistent.

The registered name shown on waste transfer notes.

Orientation

Vertical stacks the label above the control; horizontal keeps them on one row; responsive switches at the @md container breakpoint.

States: disabled & invalid

data-disabled dims the label; aria-invalid on the control pairs with FieldError to surface a validation message.

Locked once the movement has been submitted to the regulator.

Recorded weighbridge net weight, in tonnes.

Composition: new movement form

Field, FieldSet, FieldLegend and FieldSeparator combine input, native-select, textarea and checkbox into one waste movement form.

Log a waste movement

Record a load leaving Hartfield Composting Site for onward treatment.

Matches the reference printed on the waste transfer note.

Where this load is being hauled to.

Optional. Shown to the driver.

API reference

Exported parts and their props, extracted from the component source.