Next.js Discord

Discord Forum

I can't get rid of this label warning, how can I get rid of it ?

Answered
Sun bear posted this in #help-forum
Open in Discord
Avatar
Sun bearOP
return (
    <form
      className="flex flex-col items-center justify-center gap-2 text-foreground"
      style={{ marginTop: "0px", width: "100%" }}
      onSubmit={handleSubmit(onSubmit)}
      method="POST"
    >
      {/* Email Input */}
      <Controller
        name="email"
        control={control}
        render={({ field }) => (
          <InputField
            {...field}
            id="email"
            type="email"
            placeholder={t("emailPlaceholder")}
            icon={MdEmail} // Pass the component, not JSX element
            required
          />
        )}
      />
      {errors.email && (
        <p className="text-red-500 text-xs italic">{errors.email.message}</p>
      )}

      {/* Password Input */}
      <Controller
        name="password"
        control={control}
        render={({ field }) => (
          <InputField
            {...field}
            id="password"
            type="password"
            placeholder={t("passwordPlaceholder")}
            icon={MdKey} // Pass the component, not JSX element
            required
          />
        )}
      />
Image
Answered by DirtyCajunRice | AppDir
1. this is simple which is why no one answered it
2. dont bump every 2 hours. if you bump more than once a day you need to add more context.
3. labels are for inputs. a button isnt an input.
View full answer

13 Replies

Avatar
Sun bearOP
{errors.password && (
        <p className="text-red-500 text-xs italic">{errors.password.message}</p>
      )}

      {/* Forgot Password Link */}
      <div
        style={{
          alignSelf: "flex-end",
          width: "340px",
          textAlign: "right",
        }}
      >
        <label htmlFor="forgot-password" className="sr-only">
          {t("forgotPasswordLabel")}
        </label>
        <Link
  href={`/account-recovery`}
  id="forgot-password"
  className="text-text-green underline text-sm cursor-pointer inline"
>
  {t("forgotPasswordText")}
  <span className="sr-only">{t("forgotPasswordLabel")}</span>
</Link>
      </div>

      {/* Sign-in button with hidden label */}
      <label htmlFor="signin-button" className="sr-only">
  {t("signInButtonLabel")}
</label>
<div style={{ width: "340px", height: "36px" }}>
  <button
    id="signin-button"
    type="submit"
    className="rounded-md w-full px-4 mb-2 flex items-center justify-center"
    style={{
      height: "36px",
      backgroundColor: "var(--brand-green)",
      color: "var(--text-button-bright)",
      padding: "0px 16px",
    }}
  >
    {t("signInButton")}
  </button>
</div>

      {/* Error Message */}
      {errorMessage && (
        <p className="mt-4 p-4 bg-foreground/10 text-foreground text-center">
          {errorMessage}
        </p>
      )}
    </form>
  );
};

export default LoginForm
Avatar
Sun bearOP
Up
Avatar
Sun bearOP
Up
Avatar
@Sun bear Up
Avatar
DirtyCajunRice | AppDir
1. this is simple which is why no one answered it
2. dont bump every 2 hours. if you bump more than once a day you need to add more context.
3. labels are for inputs. a button isnt an input.
Answer
Avatar
Sun bearOP
Hold on, let me try again.
The error is still there after removing the label tag from the sign-in button.
Avatar
DirtyCajunRice | AppDir
again. this is basic html. you need to understand what the tags you are using do.
Avatar
Sun bearOP
It's fixed now
I had to remove it from the forgot password button as well
Image
Fixed this one too
Image
Nice, no more errors.