OPEN SOURCE Code block — magic move
Shiki · Shiki Magic Move
RSV Available for React, Svelte, Vue #editorial#type
Tune Password — strength meter
Strength meter
Reveal toggle
Esc to close
Password — strength meter
A segmented meter answers each keystroke, so the rule is learned by typing.
Use in FancyUI
-
pnpm add fancy-ui-svelteimport { PasswordInput } from "fancy-ui-svelte";
- Type
- Interaction
- Interaction
- Type
- Style
- Minimal
- Code availability
- Open source
Why it works
Strength is recomputed per input and drawn as segments, so the visitor learns what makes a password strong by watching it change rather than reading a rule list.
When to use it
Sign-up and password-change forms.
Things to watch
A meter is guidance, not a policy — validate on the server. The reveal toggle is `aria-pressed`. Do not rely on colour alone for the strength label.
Implementation clues
- strength() per input
- segmented meter
- aria-live
Related
- OPEN SOURCE
FANCYUI 
FANCYUI