Field

Forms

About

A set of accessible form field building blocks (label, input, description, error message, and bordered input group) used to compose text inputs and other form controls with React Aria Components.

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

import { Label, Input, Description, FieldGroup } from "@/components/ui/field";

export default function FieldDemo() {
  return (
    <div className="flex items-center justify-center w-full p-10">
      <div className="flex flex-col gap-1 font-sans w-72">
        <Label>Email</Label>
        <FieldGroup>
          <Input placeholder="Enter your email" />
        </FieldGroup>
        <Description>
          We'll never share your email with anyone else.
        </Description>
      </div>
    </div>
  );
}