diff --git a/.changeset/swift-spoons-double.md b/.changeset/swift-spoons-double.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/swift-spoons-double.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/components/sign-up/sign-up.tsx b/packages/ui/src/components/sign-up/sign-up.tsx
index c407b92f9f..bdfc19c0d6 100644
--- a/packages/ui/src/components/sign-up/sign-up.tsx
+++ b/packages/ui/src/components/sign-up/sign-up.tsx
@@ -4,6 +4,7 @@ import * as SignUp from '@clerk/elements/sign-up';
import { Connections } from '~/common/connections';
import { EmailField } from '~/common/email-field';
+import { EmailOrPhoneNumberField } from '~/common/email-or-phone-number-field';
import { FirstNameField } from '~/common/first-name-field';
import { LastNameField } from '~/common/last-name-field';
import { OTPField } from '~/common/otp-field';
@@ -43,7 +44,7 @@ function SignUpComponentLoaded() {
const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name');
const { enabled: usernameEnabled, required: usernameRequired } = useAttributes('username');
const { enabled: phoneNumberEnabled, required: phoneNumberRequired } = useAttributes('phone_number');
- const { enabled: emailAddressEnabled } = useAttributes('email_address');
+ const { enabled: emailAddressEnabled, required: emailAddressRequired } = useAttributes('email_address');
const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password');
const { applicationName, branded, homeUrl, logoImageUrl } = useDisplayConfig();
@@ -113,18 +114,24 @@ function SignUpComponentLoaded() {
/>
) : null}
-
+ {emailAddressEnabled && !emailAddressRequired && phoneNumberEnabled && !phoneNumberRequired ? (
+
+ ) : (
+ <>
+
- {phoneNumberEnabled ? (
-
- ) : null}
+ {phoneNumberEnabled ? (
+
+ ) : null}
+ >
+ )}
{passwordEnabled && passwordRequired ? (