form-in-use.tsx

<Form method="post" className="space-y-6">
  <div>
    <label
      htmlFor="email"
      className="block text-sm font-medium text-gray-700"
    >
      Email address
    </label>
    <div className="mt-1">
      <input
        id="email"
        required
        autoFocus={true}
        name="email"
        type="email"
        autoComplete="email"
        className="w-full border px-4 py-2 text-lg outline-none focus:border-accent focus:ring focus:ring-accent-bright/50"
      />
    </div>
  </div>

  <div>
    <label
      htmlFor="password"
      className="block text-sm font-medium text-gray-700"
    >
      Password
    </label>
    <div className="mt-1">
      <input
        id="password"
        name="password"
        type="password"
        autoComplete="current-password"
        className="w-full border px-4 py-2 text-lg outline-none focus:border-accent focus:ring focus:ring-accent-bright/50"
      />
    </div>
  </div>
  <input type="hidden" name="redirectTo" value={redirectTo} />
  <Button
    type="submit"
    className="w-full"
    disabled={transition.state !== "idle"}
  >
    {["actionSubmission", "actionRedirect"].includes(transition.type)
      ? "Verifying Credentials"
      : "Log In"}
  </Button>
  <div className="flex items-center justify-end">
    <div className="text-center text-sm text-gray-500">
      Don't have an account?{" "}
      <Link
        variant="primary"
        to={{
          pathname: "/join",
          search: searchParams.toString(),
        }}
      >
        Sign up
      </Link>
    </div>
  </div>
</Form>