jsp-dsv0.1

Fieldshadcn

Lays out a form control with its label, help text and error.

Inputs
Install
npx shadcn add field
Import from
@/components/ui/field
Guidance
draft · v0.1.0

Examples

As installed from shadcn – rendering in jsp-ds tokens through the bridge.

Profile

Shown to people you invite to review.

A sentence or two.

Field, FieldGroup and FieldSet lay out a form: label, control, help, error.

Guidance

When to use

  • Around every form control: Field holds the label, the control, help text and the error, and spaces them.
  • FieldSet and FieldLegend group related fields – an address, a set of checkboxes.
  • orientation="horizontal" puts a checkbox, radio or switch beside its label.

Rules

  • Every control has a visible label. Placeholder text is not a label – it disappears as soon as someone types.
  • Help text goes under the label's control with FieldDescription, before anyone makes a mistake.
  • Errors go in FieldError, say what to do (Enter an email address like name@example.com), and are linked with aria-describedby. Set aria-invalid on the control and data-invalid on the Field.
  • Mark optional fields, not required ones, when most are required.

Layout

  • One column. Width follows the content – max-w-site-form for a whole form.
  • Actions sit at the end, primary first, in a horizontal Field.

Install

Terminal
npx shadcn add field
Import
import { Field } from "@/components/ui/field"

From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.