Field

Field lines up a label, a control, a hint, and an error, so every row of a form reads the same way.

Workspace profile

Choose how you appear to your team.

Use the name your teammates know.

Notifications

Receive updates when your projects change.

Fig. 1 A workspace profile built from Fields: each label sits above its control, with a hint below.

When to use it

Wrap any form control that needs a visible label, a hint, or an error in Field. It owns the layout and spacing; your form still owns validation.

Group related fields with FieldSet and FieldLegend. Switch a row to horizontal when the label and the control should sit side by side, as in settings.

How it behaves

Field provides layout and styling; keep validation in your form. It does not automatically associate labels, hints, or errors. Set htmlFor/id and aria-describedby explicitly.

Use FieldSet with FieldLegend for a semantic group, FieldGroup for spacing, and FieldContent to pair a label with its description.

Field supports vertical, horizontal, and responsive orientations. Responsive fields switch layout at the FieldGroup container breakpoint.

Use data-invalid on Field and aria-invalid on the control. FieldError accepts children or an errors array, deduplicates messages, and announces them with role=alert.

Use disabled on controls and data-disabled on Field for styling. FieldLabel can wrap a Field with FieldTitle to make a selectable card with visible focus.

Labels and titles use label-md; descriptions and errors use body-sm. Legends use heading-20, or label-md with variant=label. Override roles through className while shared typography tokens remain the source of truth.

The registry item includes Label and Separator. Install controls such as Input, Checkbox, or Select separately when composing your form. Existing control motion is preserved.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

field-example.tsx

The full source is yours to edit once installed:

field.tsx