Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Password Strength Onboarding Block for Svelte

A master-password step with four visible rules (12 characters, upper and lower case, a number, not a common password), a four-cell Weak to Strong meter that counts them, and a confirm field that must match.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Say exactly what a good password needs with this password step for Svelte with Ark UI. It is a step of Clasphurst, a family password vault, as a whole screen: the page's rails and one band, a step header (“Step 2 of 4” and a hairline) and a framed panel. The Password Input is followed by a four-cell meter (Weak, Fair, Good, Strong) and the four rules it counts, each with a mark and a word, Met or Not yet: at least 12 characters, upper and lower case, a number, and not one of 20 common passwords. A confirm field must match. Set password is the one Shine Button; it stays quiet until every rule is met and the two fields match, and answers when pressed early. There is no crack-time guess: the meter is only the rules.

FAQ

How is the strength worked out?

It is the number of rules met, nothing hidden: one is Weak, two Fair, three Good, four Strong, and none is “Nothing yet”. Each rule is an entry in RULES with a test, so adding or removing one changes the meter on its own.

What is the common-password rule, and how do I make it real?

The password, lower-cased, must not be one of the 20 entries in COMMON (try Password1234). Twenty is a sample. In your app check against a long list or a breach service on the server, and keep this line as the explanation.

Is the password stored or sent?

No. It lives in this tab's state, the result shows only its length and strength, and the fields are cleared when you press Change it. Name the two fields with new-password so a password manager offers to save the real one.

What happens if I press Set password too early?

It answers in the line under the confirm field: how many rules aren't met, or that the two passwords don't match, and moves focus to the field to fix. The button is muted but not disabled, so there is always an answer.

Is it accessible from the keyboard and a screen reader?

Yes. Both fields are labelled, the show and hide button names itself, the rules are a list the password field points to, and every refusal and the result are spoken once by the page's single polite status. Typing is not announced key by key.

How does it look on a phone?

The panel keeps its fields and rules full width and Set password pins to the foot of the screen, so it never sits below the fold.

All 100 onboarding blocks