Skip to content
CodeAtlas UI sketchbook

Inputs

PasswordStrength

A 3-step strength meter with a polite text label for password fields.

<script>
  import { PasswordStrength, TextField } from "@codeatlasdev/ui";
  let password = $state("");
</script>

<TextField label="Password" type="password" bind:value={password} />
<PasswordStrength value={password} />

The label (“Weak”, “Fair”, “Strong”, from the i18n catalog) is a polite live region; the bar is decoration, so colour is never the only signal. A hint, not a policy: enforce rules on the server. passwordScore(value) is the pure function behind it (0 empty to 3 strong); pass score for your own rule.

#841

Sign-up field

Password strength:Enter a password

Reference #841 · Pick in the gallery

Code
svelte 
<script lang="ts">
  import { PasswordStrength, TextField } from '@codeatlasdev/ui';

  let password = $state('');
</script>

<div class="col">
  <TextField label="Password" type="password" bind:value={password} />
  <PasswordStrength value={password} />
</div>

<style>
  .col { display: grid; gap: var(--ca-space-2); width: 100%; max-width: 20rem; }
</style>
#842

Your own rule

`score` and `labels` replace the built-in estimate and the catalog text.

Password strength:Type a passphrase

Reference #842 · Pick in the gallery

Code
svelte 
<script lang="ts">
  import { PasswordStrength, TextField } from '@codeatlasdev/ui';

  let password = $state('');
  // Your own rule: 12+ characters is strong, 8+ fair. Return 0 (empty) to 3 (strong).
  const byLength = (v: string) => (v.length === 0 ? 0 : v.length >= 12 ? 3 : v.length >= 8 ? 2 : 1);
</script>

<div class="col">
  <TextField label="Passphrase" type="password" bind:value={password} />
  <PasswordStrength
    value={password}
    score={byLength}
    labels={{ empty: 'Type a passphrase', weak: 'Too short', fair: 'Almost there', strong: 'Good length' }}
  />
</div>

<style>
  .col { display: grid; gap: var(--ca-space-2); width: 100%; max-width: 20rem; }
</style>

Props

PropTypeDefaultDescription
valuestring''The password being typed. Only read to compute the score.
score(value: string) => 0 | 1 | 2 | 3passwordScoreReplaces the built-in estimate. 0 is empty, 3 is strong.
labelsPartial<{ empty, weak, fair, strong }>catalogLabel text; unset keys use the locale.
idstringundefinedFor a field's `aria-describedby`.
classstring''Extra class names.