Clerk · Component

SignIn.Step

SignIn.Step conditionally renders the children for a named stage of a Clerk Elements sign-in flow. It is used inside SignIn.Root for stages such as starting sign-in, verification, strategy selection, and password recovery.

How it works

SignIn.Step selects which part of a sign-in attempt to display. Place it inside SignIn.Root and give it a flow step name; Clerk conditionally renders that step's children according to the current attempt status.

Syntax

<SignIn.Step name="start">...</SignIn.Step>

Parameters

Name	Type	Description
`name`	`string`	Identifies the sign-in-flow stage to render, such as `start`, `verifications`, `choose-strategy`, `forgot-password`, or `reset-password`.

Returns

A component that conditionally renders its children for the selected sign-in-flow step.

Key points

Use SignIn.Step to represent one stage of a custom sign-in flow.
Children appear only when the current attempt matches the step's state.
Import the sign-in namespace from @clerk/elements/sign-in.
The namespace import keeps step, root, and action APIs discoverable and avoids naming collisions.
A successful start-stage submission transitions the flow toward verification.
The choose-strategy step provides an alternate verification-method selection screen.

Common mistakes

The component belongs to Clerk Elements' deprecated sign-in flow, so new implementations should use the redesigned hooks instead.
The initial screen must use the start name; it is the entry point for creating a sign-in attempt.
Verification content should be organized with nested strategy components rather than assuming every verification method is active.

Example: Render the initial sign-in step

import * as SignIn from '@clerk/elements/sign-in'

export default function SignInPage() {
  return (
    <SignIn.Root>
      <SignIn.Step name="start">
        <h1>Sign in</h1>
      </SignIn.Step>
    </SignIn.Root>
  )
}

The start step supplies the initial sign-in screen inside a SignIn.Root flow.

When to use it

Render the start form

Initial authentication UI

Display the active verification stage

Multi-factor or other verification

Let users choose a verification strategy

Alternative login method

Render forgot-password or reset-password stages

Account recovery

Interview questions

QWhat problem does SignIn.Step solve?

SignIn.Step is a flow-stage component used inside SignIn.Root. It conditionally renders its children based on the current sign-in attempt, with names such as start, verifications, choose-strategy, forgot-password, and reset-password.

Follow-up: How would you show the initial form? Use <SignIn.Step name="start"> and place the identifier field, connection controls, and submit action inside it.

QWhat is the role of the start step?

The start step renders the beginning sign-in form. After a sign-in attempt is created from it, Clerk can render the verifications step for the next stage.

Follow-up: How can a user select another verification method? Navigate to the choose-strategy step with a SignIn.Action.

QHow does the verification stage work?

The verifications step renders while a sign-in attempt is in progress. Nested Strategy components then select content according to the attempt's verification status.

Follow-up: Why include navigation to choose-strategy? It lets the user choose an alternative login method when one is available.

SignIn.Root
SignIn.Action
SignIn.Strategy

Source: Sign-in components (Deprecated) - Component reference | Clerk Docs. Checked 2026-10-15.