Field

Label, control, description and errors wired together in a single field.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add field

Dependencies

What add field installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils

npm

@base-ui/[email protected]

Examples

3 examples · 1 component

Forms that guide you

Label, help text and validation. Try submitting an empty email.

Project name

You can change it later.

Context matters too

Persistent instructions, linked to the control.

Workspace

Managed by your organization.

Available when you need it

A disabled field keeps its structure and context.

API reference

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`name` Field name within the form.	`string`	—
`invalid` Marks the field as invalid.	`boolean`	—
`disabled` Disables the field's controls.	`boolean`	`false`

States

The states that apply to this component and their visual treatment.

State	Treatment
Rest	FieldControl with a neutral 1 px border.
Focus visible	2 px ring outline; the border takes the same color.
Invalid	invalid or failed validation: destructive border and an associated FieldError.
Invalid with focus	2 px destructive outline; the neutral focus ring is not added.
Disabled	disabled turns off the control and removes it from the Tab order.
Read-only	readOnly keeps the value selectable without allowing edits.

Accessibility

Use FieldLabel to name the control and FieldDescription for persistent instructions. FieldError shows the associated error; compose Field inside Base UI's Form to validate on submit.

The placeholder complements the label. Keep focus visible and explain errors with text. Use disabled to prevent interaction and readOnly when the content should remain selectable.