Form Layout

Forms 63
About
Here is Form Layout component
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Form Layout to your project and fits it to your theme.
Code

How Form Layout is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";

export default function FormLayout02() {
  return (
    <div className="flex items-center justify-center p-10">
      <form>
        <div className="grid grid-cols-1 gap-10 md:grid-cols-3">
          <div>
            <h2 className="font-semibold text-foreground dark:text-foreground">
              Personal information
            </h2>
            <p className="mt-1 text-sm leading-6 text-muted-foreground dark:text-muted-foreground">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
            </p>
          </div>
          <div className="sm:max-w-3xl md:col-span-2">
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-6">
              <div className="col-span-full sm:col-span-3">
                <Label
                  htmlFor="first-name"
                  className="text-sm font-medium text-foreground dark:text-foreground"
                >
                  First name
                </Label>
                <Input
                  type="text"
                  id="first-name"
                  name="first-name"
                  autoComplete="given-name"
                  placeholder="Emma"
                  className="mt-2"
                />
              </div>
              <div className="col-span-full sm:col-span-3">
                <Label
                  htmlFor="last-name"
                  className="text-sm font-medium text-foreground dark:text-foreground"
                >
                  Last name
                </Label>
                <Input
                  type="text"
                  id="last-name"
                  name="last-name"
                  autoComplete="family-name"
                  placeholder="Crown"
                  className="mt-2"
                />
              </div>
              <div className="col-span-full">
                <Label
                  htmlFor="email"
                  className="text-sm font-medium text-foreground dark:text-foreground"
                >
                  Email
                </Label>
                <Input
                  type="email"
                  id="email"
                  name="email"
                  autoComplete="email"
                  placeholder="emma@company.com"
                  className="mt-2"
                />
              </div>
              <div className="col-span-full sm:col-span-3">
                <Label
                  htmlFor="birthyear"
                  className="text-sm font-medium text-foreground dark:text-foreground"
                >
                  Birth year
                </Label>
                <Input
                  type="number"
                  id="birthyear"
                  name="year"
                  placeholder="1990"
                  className="mt-2"
                />
              </div>
              <div className="col-span-full sm:col-span-3">
                <Label
                  htmlFor="role"
                  className="text-sm font-medium text-foreground dark:text-foreground"
                >
                  Role
                </Label>
                <Input
                  type="text"
                  id="role"
                  name="role"
                  placeholder="Senior Manager"
                  disabled
                  className="mt-2"
                />
                <p className="mt-2 text-xs text-muted-foreground dark:text-muted-foreground">
                  Roles can only be changed by system admin.
                </p>
              </div>
            </div>
          </div>
        </div>
        <Separator className="my-8" />
        <div className="grid grid-cols-1 gap-10 md:grid-cols-3">
          <div>
            <h2 className="font-semibold text-foreground dark:text-foreground">
              Workspace settings
            </h2>
            <p className="mt-1 text-sm leading-6 text-muted-foreground dark:text-muted-foreground">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
            </p>
          </div>
          <div className="sm:max-w-3xl md:col-span-2">
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-6">
              <div className="col-span-full sm:col-span-3">
                <Label
                  htmlFor="workspace-name"
                  className="text-sm font-medium text-foreground dark:text-foreground"
                >
                  Workspace name
                </Label>
                <Input
                  type="text"
                  id="workspace-name"
                  name="workspace-name"
                  placeholder="Test workspace"
                  className="mt-2"
                />
              </div>
              <div className="col-span-full sm:col-span-3">
                <Label
                  htmlFor="visibility"
                  className="text-sm font-medium text-foreground dark:text-foreground"
                >
                  Visibility
                </Label>
                <Select name="visibility" defaultValue="private">
                  <SelectTrigger id="visibility" className="mt-2">
                    <SelectValue placeholder="Select visibility" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="public">Public</SelectItem>
                    <SelectItem value="private">Private</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="col-span-full">
                <Label
                  htmlFor="workspace-description"
                  className="text-sm font-medium text-foreground dark:text-foreground"
                >
                  Workspace description
                </Label>
                <Textarea
                  id="workspace-description"
                  name="workspace-description"
                  className="mt-2"
                  rows={4}
                />
                <p className="mt-2 text-xs text-muted-foreground dark:text-muted-foreground">
                  Note: description provided will not be displayed externally.
                </p>
              </div>
            </div>
          </div>
        </div>
        <Separator className="my-8" />
        <div className="grid grid-cols-1 gap-10 md:grid-cols-3">
          <div>
            <h2 className="font-semibold text-foreground dark:text-foreground">
              Notification settings
            </h2>
            <p className="mt-1 text-sm leading-6 text-muted-foreground dark:text-muted-foreground">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
            </p>
          </div>
          <div className="sm:max-w-3xl md:col-span-2">
            <fieldset>
              <legend className="text-sm font-medium text-foreground dark:text-foreground">
                Newsletter
              </legend>
              <p
                id="newsletter-description"
                className="mt-2 text-sm leading-6 text-muted-foreground dark:text-muted-foreground"
              >
                Change how often you want to receive updates from our
                newsletter.
              </p>
              <RadioGroup defaultValue="never" className="mt-6">
                <div className="flex items-center gap-x-3">
                  <RadioGroupItem
                    id="every-week"
                    value="every-week"
                    aria-describedby="newsletter-description"
                  />
                  <Label
                    htmlFor="every-week"
                    className="text-sm font-medium text-foreground dark:text-foreground"
                  >
                    Every week
                  </Label>
                </div>
                <div className="flex items-center gap-x-3">
                  <RadioGroupItem
                    id="every-month"
                    value="every-month"
                    aria-describedby="newsletter-description"
                  />
                  <Label
                    htmlFor="every-month"
                    className="text-sm font-medium text-foreground dark:text-foreground"
                  >
                    Every month
                  </Label>
                </div>
                <div className="flex items-center gap-x-3">
                  <RadioGroupItem
                    id="never"
                    value="never"
                    aria-describedby="newsletter-description"
                  />
                  <Label
                    htmlFor="never"
                    className="text-sm font-medium text-foreground dark:text-foreground"
                  >
                    Never
                  </Label>
                </div>
              </RadioGroup>
            </fieldset>
          </div>
        </div>
        <Separator className="my-8" />
        <div className="flex items-center justify-end space-x-4">
          <Button type="button" variant="outline" className="whitespace-nowrap">
            Go back
          </Button>
          <Button type="submit" className="whitespace-nowrap">
            Save settings
          </Button>
        </div>
      </form>
    </div>
  );
}