Skip to content

Field

Forms

Connects a form control with its label, description, and validation message.

React · copy into your project · light and dark themes

Try it

Variant

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/field.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes input. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/field.json https://luv-jeri.github.io/cojeev-ui/r/input.json

Using field

Wrap one control in FieldControl and pair it with FieldLabel and a description or error message.
Set invalid from your validation result and use FieldSet with FieldLegend for related controls.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

FieldProps

Prop	Type	Required
`variant`	`"default" \| "invalid" \| null \| undefined`	No
`invalid`	`boolean`	No
`controlId`	`string`	No

FieldLabelProps

Accepts the native or primitive props declared by its exported TypeScript type.

FieldControlProps

Accepts the native or primitive props declared by its exported TypeScript type.

FieldDescriptionProps

Accepts the native or primitive props declared by its exported TypeScript type.

FieldErrorProps

Prop	Type	Required
`errors`	`Array<{ message?: string } \| undefined>`	No

FieldSetProps

Accepts the native or primitive props declared by its exported TypeScript type.

FieldLegendProps

Accepts the native or primitive props declared by its exported TypeScript type.

FieldGroupProps

Prop	Type	Required
`asChild`	`boolean`	No

Accessibility

FieldControl supplies the control ID, described-by connection, and invalid state when used with the field parts.
Use either FieldDescription or FieldError for the shared message slot, or assign distinct IDs and an explicit aria-describedby when both are present.

States and appearance

errorresthoverfocusactive

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.