Field

Forms

About

A compound form-field wrapper that connects a label, description and validation error to an input via generated ids and ARIA attributes, with vertical, horizontal and responsive layouts plus fieldset/legend grouping.

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 * as React from "react";
import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldDescription,
  FieldSet,
  FieldLegend,
  FieldSeparator,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export default function FieldHorizontalDemo() {
  const id = React.useId();
  const [logging, setLogging] = React.useState("info");

  return (
    <div className="w-full max-w-md p-6 bg-background text-foreground">
      <FieldSet>
        <FieldLegend>Notification settings</FieldLegend>
        <FieldGroup>
          <Field orientation="horizontal">
            <FieldLabel htmlFor={`${id}-log-level`}>Log level</FieldLabel>
            <Input
              id={`${id}-log-level`}
              value={logging}
              onChange={(event) => setLogging(event.target.value)}
              className="max-w-[160px]"
            />
          </Field>
          <FieldSeparator />
          <Field orientation="responsive">
            <FieldLabel htmlFor={`${id}-webhook`}>Webhook URL</FieldLabel>
            <Input
              id={`${id}-webhook`}
              placeholder="https://example.com/hook"
            />
          </Field>
          <FieldDescription>Changes apply to new events only.</FieldDescription>
        </FieldGroup>
      </FieldSet>
    </div>
  );
}