shadcn.io is not affiliated with official shadcn/ui
Multi Step Rail Login Block for Svelte
A three-step sign-in for a support desk: a vertical Steps rail at the start (Email, Password, Code) with what was given and an Edit button on each finished step, and the one panel of the step in hand at the end.
Installation
Overview
Show where a sign-in stands and let people fix an earlier answer, with this multi step login block for Svelte with Ark UI. It's the sign-in of Corvidesk, a support desk: the page's side rails run the full height of the screen and one band crosses it between two rules, split by a divider that meets both with a plus mark. At the start sit the mark, the heading and the catalog's vertical Steps rail (Email, Password, Code); a finished step shows what was given in it, the address, "8 characters" or "Verified", with an Edit Button that goes back to that step and clears the steps after it. At the end is the one panel of the step in hand: an Input for the email, a Password Input, then a six-digit Input OTP that prints its demo code once, each with a Shine Button, the only colored control. The panels share one grid cell, so nothing moves, and on a phone the rail becomes a row of three. It's built from Steps, Input, Password Input, Input OTP, Button, Shine Button and Guides, with CSS transitions only. For sign-ins with a second factor, and for any wizard where people need to see their earlier answers.
FAQ
What stays in the page, and what is the demo code?
Everything. Any address that looks like an email and any password get through the first two steps, and the code step accepts 482913, which it prints once under the field so keyboard users and tests can pass it. Verifying waits less than a second, then shows "You're signed in" with a polite status message saying nothing was sent. In a product, check each answer with your server as it's given, keep the busy state until it answers, and show its refusal under the field it concerns.
What does Edit do to the steps after it?
It clears them. Editing the email clears the password and the code, and editing the password clears the code, because a changed answer makes what depended on it stale. Focus moves to the field of the step you opened and a polite message says what was cleared. The rail updates at once: later steps read "Not yet" again, and the Edit buttons exist only on finished steps.
Is the rail something you can press?
No. It is a list that shows progress, with the current step marked, not a set of tabs, so it never lets someone jump ahead. The only controls in it are the Edit buttons of finished steps, named "Edit email" and "Edit password". Finished steps say "Done" to screen readers before their name, since the marker is only a picture of a number or a check.
What happens to the rail on a phone?
It becomes a row of three markers with their names, and the values go to screen readers only. There is no room for Edit there, so the second and third steps show a Back button that goes to the step before and clears what came after, the same as Edit does. From the large breakpoint up the rail is vertical, with values and Edit beside each marker, and the Back buttons are gone.
How does the code field behave?
It is one field of six slots, always read left to right whatever the page direction. Typing a digit moves along the slots, anything that isn't a digit is dropped, and pressing Verify with fewer than six says "Enter all 6 digits" and moves focus back. A wrong code is one sentence under the field, never a shake or a color. It is six inputs that pass focus to each other.