diff --git a/.changeset/plenty-toes-buy.md b/.changeset/plenty-toes-buy.md
new file mode 100644
index 00000000000..adfbb4e36fa
--- /dev/null
+++ b/.changeset/plenty-toes-buy.md
@@ -0,0 +1,7 @@
+---
+"@clerk/localizations": patch
+"@clerk/shared": patch
+"@clerk/ui": patch
+---
+
+Use distinct password placeholder for sign-up forms
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index cd8b0200914..8f54b83a450 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -221,6 +221,7 @@ export const enUS: LocalizationResource = {
formFieldInputPlaceholder__organizationName: 'Organization name',
formFieldInputPlaceholder__organizationSlug: 'my-org',
formFieldInputPlaceholder__password: 'Enter your password',
+ formFieldInputPlaceholder__signUpPassword: 'Create a password',
formFieldInputPlaceholder__phoneNumber: 'Enter your phone number',
formFieldInputPlaceholder__username: 'Enter your username',
formFieldInput__emailAddress_format: 'Example format: name@example.com',
diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts
index 63ad4de0f21..837031ac5d6 100644
--- a/packages/shared/src/types/localization.ts
+++ b/packages/shared/src/types/localization.ts
@@ -119,6 +119,7 @@ export type __internal_LocalizationResource = {
formFieldInputPlaceholder__username: LocalizationValue;
formFieldInputPlaceholder__emailAddress_username: LocalizationValue;
formFieldInputPlaceholder__password: LocalizationValue;
+ formFieldInputPlaceholder__signUpPassword: LocalizationValue;
formFieldInputPlaceholder__firstName: LocalizationValue;
formFieldInputPlaceholder__lastName: LocalizationValue;
formFieldInputPlaceholder__backupCode: LocalizationValue;
diff --git a/packages/ui/src/components/SignIn/__tests__/SignInFactorOne.test.tsx b/packages/ui/src/components/SignIn/__tests__/SignInFactorOne.test.tsx
index 1de4ab411a9..2a43a6632f0 100644
--- a/packages/ui/src/components/SignIn/__tests__/SignInFactorOne.test.tsx
+++ b/packages/ui/src/components/SignIn/__tests__/SignInFactorOne.test.tsx
@@ -118,6 +118,7 @@ describe('SignInFactorOne', () => {
});
render(, { wrapper });
await screen.findByText('Password');
+ screen.getByPlaceholderText('Enter your password');
});
it('should render the other methods component when clicking on "Forgot password"', async () => {
diff --git a/packages/ui/src/components/SignUp/SignUpContinue.tsx b/packages/ui/src/components/SignUp/SignUpContinue.tsx
index 29ae18c8e31..55c339d67f0 100644
--- a/packages/ui/src/components/SignUp/SignUpContinue.tsx
+++ b/packages/ui/src/components/SignUp/SignUpContinue.tsx
@@ -81,7 +81,7 @@ function SignUpContinueInternal() {
password: useFormControl('password', '', {
type: 'password',
label: localizationKeys('formFieldLabel__password'),
- placeholder: localizationKeys('formFieldInputPlaceholder__password'),
+ placeholder: localizationKeys('formFieldInputPlaceholder__signUpPassword'),
validatePassword: true,
}),
legalAccepted: useFormControl('legalAccepted', '', {
diff --git a/packages/ui/src/components/SignUp/SignUpStart.tsx b/packages/ui/src/components/SignUp/SignUpStart.tsx
index 90059b9a2f5..8400c8984ce 100644
--- a/packages/ui/src/components/SignUp/SignUpStart.tsx
+++ b/packages/ui/src/components/SignUp/SignUpStart.tsx
@@ -109,7 +109,7 @@ function SignUpStartInternal(): JSX.Element {
password: useFormControl('password', '', {
type: 'password',
label: localizationKeys('formFieldLabel__password'),
- placeholder: localizationKeys('formFieldInputPlaceholder__password'),
+ placeholder: localizationKeys('formFieldInputPlaceholder__signUpPassword'),
validatePassword: true,
buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),
}),
diff --git a/packages/ui/src/components/SignUp/__tests__/SignUpContinue.test.tsx b/packages/ui/src/components/SignUp/__tests__/SignUpContinue.test.tsx
index 96495d93cd3..ebf2e5dd69b 100644
--- a/packages/ui/src/components/SignUp/__tests__/SignUpContinue.test.tsx
+++ b/packages/ui/src/components/SignUp/__tests__/SignUpContinue.test.tsx
@@ -51,6 +51,7 @@ describe('SignUpContinue', () => {
// the email field will be lost
expect(screen.queryByText(/email address/i)).toBeInTheDocument();
expect(screen.queryByText(/password/i)).toBeInTheDocument();
+ screen.getByPlaceholderText('Create a password');
});
it('does not show email field if has been verified', async () => {
diff --git a/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx b/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx
index 39012596dbb..e85ee5184fa 100644
--- a/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx
+++ b/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx
@@ -44,6 +44,7 @@ describe('SignUpStart', () => {
render(, { wrapper });
screen.getByText('Email address');
screen.getByText('Password');
+ screen.getByPlaceholderText('Create a password');
});
it('enables sign up with phone number and password', async () => {