Warning: Prop `htmlFor` did not match

[hayato94087]

Hi,

I have just tried to implement a form example displayed in the https://ui.shadcn.com/docs/components/form.

This is running result.

I got this error.

My Input contains the server id.

This is my code.

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { useForm } from "react-hook-form";

const formSchema = z.object({
  username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
});

export default function Home() {
  // 1. Define your form.
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
    },
  });

  // 2. Define a submit handler.
  function onSubmit(values: z.infer<typeof formSchema>) {
    // Do something with the form values.
    // ✅ This will be type-safe and validated.
    console.log(values);
  }

  return (
    <main>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
          <FormField
            control={form.control}
            name="username"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Username</FormLabel>
                <FormControl>
                  <Input placeholder="shadcn" {...field} />
                </FormControl>
                <FormDescription>
                  This is your public display name.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit">Submit</Button>
        </form>
      </Form>
    </main>
  );
}

You can reproduce this error in following repository.

https://github.com/hayato94087/nextjs-shadcnui-form-error-sample

This issue is probably similar one as https://github.com/shadcn-ui/ui/issues/992.

If I downgrade next version from 13.4.12 to 13.4.7, then the problem is solved, similar to https://github.com/shadcn-ui/ui/issues/992.

[jaitaiwan]

I can confirm I just started receiving this too.

[xtan9]

I had the same issue.

[jaitaiwan]

The referred to issue, I downgraded to 13.4.10 and it worked for me.

[hayato94087]

You can reproduce this error in following repository.

https://github.com/hayato94087/nextjs-shadcnui-form-error-sample

This issue is probably similar one as https://github.com/shadcn-ui/ui/issues/992.

If I downgrade next version from 13.4.12 to 13.4.7, then the problem is solved, similar to https://github.com/shadcn-ui/ui/issues/992.

I initially wrote 13.4.7 will solve the problem, but, yes, downgrading to next to 13.4.10 also worked to me :)

Not sure what is causing the problem, though.

[willianrod]

Yep, I can confirm I'm having the same issue

[bakemonostan]

soooo, do we just leave it like that? I don't want to have to down grade though .. I'll hold on a bit for a solution

[jaitaiwan]

nextjs bundles a custom version of react with it; So my guess is there's a minor update to react which is breaking this. In all likelihood the radix-ui maintainers will need to learn what that difference is and update the library accordingly.

[KeisukeNagakawa]

I can confirm this too.

[slim904]

Run next@canary, it represents the daily-shipped canary iteration of Next.js, encompassing all the latest features and fixes that haven't been officially released into the stable version. npm install next@canary or yarn add next@canary This work for me! https://nextjs.org/docs/messages/opening-an-issue

[bdthombre]

I am getting the same error.

[R2rho]

I am also getting the same error, unfortunately!

[majidsheikh96]

Does anyone found the solution?

[majidsheikh96]

Run next@canary, it represents the daily-shipped canary iteration of Next.js, encompassing all the latest features and fixes that haven't been officially released into the stable version. npm install next@canary or yarn add next@canary This work for me! https://nextjs.org/docs/messages/opening-an-issue

This works for me. thank you

[hojjat-afsharan]

getting the same error

[shadcn]

Confirmed this is fixed in latest canary. You can try it by updating next.

pnpm add next@canary

(Expect a stable release soon)

[AdehenryOmoOba]

Confirmed this is fixed in latest canary. You can try it by updating next.

pnpm add next@canary

(Expect a stable release soon)

it works, thanks

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.