Field

Field renders the label, help text and error for one control, and passes id, aria-describedby, aria-invalid and required to the control inside it. Input, Textarea, Select and Checkbox all read this automatically.

Import

import { Field } from "@/components/ui/field"

Example

<form onSubmit={handleSubmit}>
  <Stack gap={4}>
    <Field label="Email" description="We never share your email." error={errors.email} required>
      <Input type="email" name="email" />
    </Field>
    <Field label="Plan">
      <Select name="plan" defaultValue="pro">
        <SelectTrigger>
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="free">Free</SelectItem>
          <SelectItem value="pro">Pro</SelectItem>
        </SelectContent>
      </Select>
    </Field>
    <Field label="I agree to the terms" orientation="horizontal">
      <Checkbox name="terms" />
    </Field>
    <Button type="submit">Create account</Button>
  </Stack>
</form>

With react-hook-form

const { register, formState: { errors } } = useForm<FormValues>()

<Field label="Name" error={errors.name?.message} required>
  <Input {...register("name", { required: "Name is required" })} />
</Field>

Props

• label (required): visible label text.
• description: help text under the label.
• error: error message. Marks the control invalid.
• required: marks the control required and shows *.
• orientation: vertical (default) or horizontal. Use horizontal for Checkbox.
• id: control id. Generated when not set.

Building a new control

Call useFieldControl(props) in your control and spread the result onto the element. It adds the Field wiring and keeps any props you set directly.