Field

Forms

About

An accessible wrapper that connects a label, help text, and error/success messaging to a single form control.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Field to your project and fits it to your theme.

Code

How Field is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { Field, FieldControl } from "@/components/ui/field";

export default function FieldDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6 bg-[var(--background)] p-6 text-[var(--foreground)]">
      <Field
        label="Email"
        required
        description="We'll only use this to send you account updates."
      >
        <FieldControl asChild>
          <input
            type="email"
            placeholder="you@company.com"
            className="h-9 w-full rounded-[var(--primitive-radius-control)] border border-[var(--border)] bg-[var(--surface)] px-3 text-sm text-[var(--foreground)] outline-none placeholder:text-[var(--primitive-text-placeholder)] focus:border-[var(--ring)] focus:ring-2 focus:ring-[var(--ring)]/30"
          />
        </FieldControl>
      </Field>
    </div>
  );
}