Inputs / Field

Field

<Field />Stable

The wrapper for a form row: label + control + description + error. Use FieldGroup to stack fields, FieldSet to group with a legend. The recommended way to compose any form.

import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/upnext";

Playground

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Preview

Use the name on his official transcript.

Code

import { Field } from "@/components/upnext";


<Field />

Patterns

Use the name on his official transcript.

<Field>
  <FieldLabel htmlFor="name">Recruit name</FieldLabel>
  <Input id="name" placeholder="Marcus Reed" />
  <FieldDescription>Use the name on his official transcript.</FieldDescription>
</Field>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.