Sign-up components
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.
Properties
- Name
path?- Type
string- Description
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
- Name
fallback?- Type
React.ReactNode- Description
Fallback markup to render while Clerk is loading. Default:
null
- Name
routing?- Type
'path' | 'virtual'- Description
If you want to render Clerk Elements in e.g. a modal, use the
'virtual'routing mode. Default:'path'
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.
Properties
- Name
name- Type
'start' | 'continue' | 'verifications'- Description
The
nameof the step for which its children will be rendered.
<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.
Usage
<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).
Usage
<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.
Usage
<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.
Properties
- Name
name- Type
'code' | 'email_code' | 'email_link' | 'phone_code'- Description
The name of the strategy for which its children will be rendered.
<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>.
Properties
- Name
submit?- Type
boolean- Description
If
true, the action will submit the form. Default:false
- Name
navigate?- Type
'start' | 'previous'- Description
The name of the step to navigate to. Default:
undefined
- Name
resend?- Type
boolean- Description
If
true, the action will resend the verification code for the currently active strategy, if applicable. Default:false
- Name
fallback?- Type
({ resendableAfter: number }) => React.ReactNode- Description
Only used when
resendistrue. If provided, the fallback markup will be rendered before the resend delay has expired. Default:null
<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><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><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>.
Properties
- Name
asChild?- Type
boolean- Description
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
<SignUp.Step name="start">
<SignUp.Captcha />
<SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step><SignUp.Step name="start">
<SignUp.Captcha asChild>
<aside />
</SignUp.Captcha>
<SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>Feedback
Last updated on