āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/guides/customizing-clerk/elements/reference/sign-up ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
The following components are used when creating sign-up flows. They are imported from @clerk/elements/sign-up. It is recommended to import them all under the SignUp namespace to make discovery easier and reduce naming conflicts with other components throughout your application. The code snippets on this page assume you have imported the components this way.
import * as SignUp from '@clerk/elements/sign-up'
export default function SignUpPage() {
return (
<SignUp.Root>
<SignUp.Step name="start" />
<SignUp.Step name="continue" />
<SignUp.Step name="verifications" />
</SignUp.Root>
)
}
<Root>The root sign-up component. Sets up providers and state management for the sign-up flow. Must wrap all other sign-up components. <Root> will validate your built sign-up flow to ensure the implementation is correct based on instance settings and best practices.
The root path the sign-up flow is mounted at. If not provided, will be automatically inferred (either through the current pathname or environment variables). Fallback: /sign-up
fallback?React.ReactNodeFallback markup to render while Clerk is loading. Default: null
routing?'path' | 'virtual'If you want to render Clerk Elements in e.g. a modal, use the 'virtual' routing mode. Default: 'path'
</Properties>
The following data attributes are also added to the underlying element:
data-global-error - Refers to the <GlobalError> status<Step>A step in the sign-up flow. Controls conditionally rendering its children based on the status of the current sign up attempt. start is the initial step.
The name of the step for which its children will be rendered.
</Properties>
<Step name="start">Renders the beginning sign-up form. Once a sign up attempt has been created from this step, the continue or verification step will be rendered. The exact fields that should be rendered depend on your instance configuration.
<SignUp.Step name="start">
<Clerk.Connection name="google">Sign up with Google</Clerk.Connection>
<Clerk.Field name="identifier">
<Clerk.Label>Email</Clerk.Label>
<Clerk.Input />
<Clerk.FieldError />
</Clerk.Field>
<SignUp.Captcha />
<SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>
<Step name="continue">Collects additional required fields from the user during a sign up attempt. This step will be rendered if a user initiates a sign up, but does not provide all required fields (e.g. through social connection).
<SignUp.Step name="continue">
<Clerk.Field name="username">
<Clerk.Label>Username</Clerk.Label>
<Clerk.Input />
<Clerk.FieldError />
</Clerk.Field>
<SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>
<Step name="verifications">Verifies certain fields provided during sign up. Will render if your instance is configured to require verification of emails or phone numbers.
<SignUp.Step name="verifications">
<SignUp.Strategy name="email_code">
<Clerk.Field name="code">
<Clerk.Label>Email code</Clerk.Label>
<Clerk.Input />
<Clerk.FieldError />
</Clerk.Field>
<SignUp.Action submit>Verify email</SignUp.Action>
</SignUp.Strategy>
</SignUp.Step>
<Strategy>Conditionally renders its children depending on the authentication strategy that needs to be verified. Does not render any markup on its own.
The name of the strategy for which its children will be rendered. </Properties>
<SignUp.Strategy name="email_code">
<Clerk.Field name="code">
<Clerk.Label>Code</Clerk.Label>
<Clerk.Input />
<Clerk.FieldError />
</Clerk.Field>
<SignUp.Action submit>Verify</SignUp.Action>
</SignUp.Strategy>
<Action>Exposes various flow-related actions. It can be used to submit forms, navigate between steps, and re-trigger sending of verification codes. By default, renders a <button>.
If true, the action will submit the form. Default: false
navigate?'start' | 'previous'The name of the step to navigate to. Default: undefined
resend?booleanIf true, the action will resend the verification code for the currently active strategy, if applicable. Default: false
fallback?({ resendableAfter: number }) => React.ReactNodeOnly used when resend is true. If provided, the fallback markup will be rendered before the resend delay has expired. Default: null
</Properties>
<Action submit><SignUp.Step name="start">
<Clerk.Field name="identifier">
<Clerk.Label>Email</Clerk.Label>
<Clerk.Input />
<Clerk.FieldError />
</Clerk.Field>
<SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>
<Action navigate><SignUp.Step name="continue">
<Clerk.Field name="username">
<Clerk.Label>Username</Clerk.Label>
<Clerk.Input />
<Clerk.FieldError />
</Clerk.Field>
<SignUp.Action submit>Sign up</SignUp.Action>
<SignUp.Action navigate="start">Go back</SignUp.Action>
</SignUp.Step>
<Action resend><SignUp.Step name="verifications">
<SignUp.Strategy name="email_code">
<Clerk.Field name="code">
<Clerk.Label>Code</Clerk.Label>
<Clerk.Input />
<Clerk.FieldError />
</Clerk.Field>
<SignUp.Action submit>Verify</SignUp.Action>
<SignUp.Action
resend
fallback={({ resendableAfter }) => <p>Resend code in {resendableAfter} second(s)</p>}
>
Resend code
</SignUp.Action>
</SignUp.Strategy>
</SignUp.Step>
<Captcha>Renders the Cloudflare Turnstile widget. It must be used within the <Step name="start"> component. By default, renders a <div>.
If true, <Captcha> will render as its child element. The element must be a self-closing element or component. Any children passed to the immediate child component of <Captcha> will be ignored. Default: false
</Properties>
<Captcha> usage<SignUp.Step name="start">
<SignUp.Captcha />
<SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>
asChild<SignUp.Step name="start">
<SignUp.Captcha asChild>
<aside />
</SignUp.Captcha>
<SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā