Render the first sign-up form with the start step.
Initial registration
Clerk · Component
SignUp.Step
SignUp.Step conditionally renders part of a Clerk Elements sign-up flow. Use start for the initial form, continue for missing required fields, and verifications for configured email or phone checks.
How it works
SignUp.Step conditionally renders its children for the current sign-up attempt. Use the start step for the initial form, continue for required fields omitted during the initial attempt, and verifications when configured email or phone checks are needed.
Syntax
<SignUp.Step name="start">...</SignUp.Step>Parameters
| Name | Type | Description |
|---|---|---|
name | "start" | "continue" | "verifications" | Selects the sign-up stage whose children should render: start, continue, or verifications. |
Returns
A React component that conditionally renders its children for the current sign-up attempt step.
Key points
- A step represents one UI phase in the sign-up flow and controls which phase is visible.
- Include a start step so users can begin creating a sign-up attempt.
- Use name="start" for the initial sign-up form.
- After the initial attempt is created, Clerk may switch rendering to a later step.
- The continue step gathers required values missing from the initial attempt.
- Social sign-up can lead to continue when the provider leaves required fields unfilled.
- The verifications step handles configured verification of fields supplied during sign-up.
Common mistakes
- This feature is documented on a deprecated Clerk Elements page; Clerk Core 3's redesigned hooks are recommended for new custom flows.
- Do not assume the start step has a fixed set of fields; Clerk instance settings determine what it must collect.
- The verifications step appears only when email or phone verification is enabled in the instance configuration.
Example: Render sign-up steps
import * as SignUp from '@clerk/elements/sign-up'
export default function SignUpPage() {
return (
<SignUp.Root>
<SignUp.Step name="start">
<h1>Create an account</h1>
</SignUp.Step>
<SignUp.Step name="continue">
<p>Additional information</p>
</SignUp.Step>
<SignUp.Step name="verifications">
<p>Verify your contact details</p>
</SignUp.Step>
</SignUp.Root>
)
}This renders each possible sign-up stage under the SignUp namespace.
When to use it
Collect required values not supplied by a social connection with continue.
Incomplete provider data
Render email or phone verification UI with verifications when the instance requires it.
Contact verification
Interview questions
QWhat does SignUp.Step do?
SignUp.Step is a conditional flow component. It renders its children when the current sign-up attempt is at the named stage, such as start, continue, or verifications.
Follow-up: How would a social sign-up reach continue? If the social provider does not supply all required fields, Clerk renders continue so the missing fields can be collected.
QDescribe the start step lifecycle.
The start step renders the beginning form and creates the sign-up attempt. After that, Clerk can render continue or verifications depending on missing required fields and configured verification requirements.
Follow-up: What determines the fields in start? The Clerk instance configuration determines which fields the initial form needs.
QWhen are continue and verifications rendered?
continue collects required information that was not supplied when the attempt began, including information omitted by a social connection. verifications handles configured email or phone verification.
Follow-up: When is verifications skipped? It is skipped when the instance does not require verification for the relevant email or phone fields.
Related
SignUp.RootClerk.InputClerk.Label@clerk/elements/sign-up