Field Components

Forms 1

About

Here is Field Components

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

Code

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

Usage.tsx

import { Field } from "@ark-ui/react/field";

export default function InputWithInsetLabel() {
  return (
    <Field.Root className="max-w-sm w-full relative">
      <Field.Input
        type="email"
        placeholder="Email"
        className="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 pt-6 text-sm text-gray-900 dark:text-gray-100 focus:border-gray-900 dark:focus:border-gray-100 focus:outline-hidden focus:ring-1 focus:ring-gray-900 dark:focus:ring-gray-100 placeholder-gray-500 dark:placeholder-gray-400 "
      />
      <Field.Label className="absolute top-2 left-3 text-xs font-medium text-gray-500 dark:text-gray-400">
        Support Email
      </Field.Label>
    </Field.Root>
  );
}