Field

Wrap Field around each form control that has a label, description or error. It owns validation timing, the required marker and the accessible links between parts, and offers floating labels for compact forms.

Install

bashnpx shadcn@4.18.0 add @siteplane/input

The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Label: Pick plain Label for a control that needs a name and nothing else.
• vs Fieldset: Pick Fieldset to group several Fields under one legend, or render a Field as a Fieldset for checkbox and radio groups.
• vs Form: Pick Form as the outer boundary that submits Fields, sets form-wide validation mode and maps server errors.

Rules

• Keep FieldLabel, the control, FieldDescription and FieldError inside one Field. Field links them for you.
• Put required on the control and add requiredIndicator to the Field instead of typing an asterisk into the label.
• Run client-side checks through validate and validationMode. When your app decides the error itself, mark Field as invalid and give FieldError match.
• Use labelPlacement="floating" only with Input, Textarea, Select and single-select Combobox or Autocomplete. Leave it off any control with a leading icon.
• Change spacing with the --field-gap variable, not a gap-* utility, so FieldError stays aligned.
• Install it with input; Field has no registry item of its own.

Reference

• Field docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Forms & selection. Read the installed source under src/siteplane before relying on an API.