Password input

About this example

SvPasswordInput on its own in Svelte 5: a show and hide reveal toggle and an optional four-level strength meter, with a label, a hint, validation and localizable strings, plus the autocomplete attribute for password managers. It is the SvGrid password cell editor, standalone.

SvPasswordInput on its own - a reveal toggle and an optional 4-level strength meter, plus the shared field contract (label / hint / validation) and localizable strings. The SvGrid password cell editor, standalone.

Imports, features and API used

Imports: @svgrid/grid

Frequently asked questions

How is strength calculated?

From length and the mix of lower case, upper case, digits and symbols, mapped to four levels shown as a bar with a label. showStrength turns the meter on.

Can I translate the strings?

Yes. The messages prop overrides the reveal button label and the strength level names.

Does the reveal toggle affect autofill?

No. The input keeps its autocomplete value, new-password here, so browsers and password managers treat it as a password field whether or not it is revealed.

Related documentation

• SvPasswordInput

Related articles

• SvGrid UI Components Tips and Tricks: Svelte 5 Buttons, Inputs, Tree, Forms - Practical tips for the SvGrid UI component kit - SvButton states, a Cmd+K command palette, a virtualized searchable tree, schema-driven forms, a parsing date/time field, and the shared field contract - each with a code snippet.

Source code (301-password-input.svelte)

<script lang="ts">
  /**
   * SvPasswordInput on its own - a reveal toggle and an optional 4-level strength
   * meter, plus the shared field contract (label / hint / validation) and
   * localizable strings. The SvGrid password cell editor, standalone.
   */
  import { SvPasswordInput } from '@svgrid/grid'

  let pw = $state('')
  let confirm = $state('')
  const mismatch = $derived(confirm && confirm !== pw ? 'Passwords do not match' : undefined)
</script>

<div class="wrap">
  <header>
    <h2>Password input</h2>
    <p><code>SvPasswordInput</code> - reveal toggle + strength heuristic. Every string (Show/Hide, Weak..Strong) is overridable via <code>messages</code>.</p>
  </header>

  <div class="col">
    <SvPasswordInput
      value={pw}
      label="New password"
      hint="8+ chars with a mix of cases, digits and symbols"
      showStrength
      autocomplete="new-password"
      onChange={(v) => (pw = v)}
    />
    <SvPasswordInput
      value={confirm}
      label="Confirm password"
      required
      invalid={!!mismatch}
      error={mismatch}
      autocomplete="new-password"
      onChange={(v) => (confirm = v)}
    />
    <SvPasswordInput
      value="hunter2"
      label="French labels"
      showStrength
      messages={{ show: 'Afficher', hide: 'Masquer', weak: 'Faible', fair: 'Moyen', good: 'Bon', strong: 'Fort' }}
    />
  </div>
</div>

<style>
  .wrap { padding: 20px; max-width: 520px; display: flex; flex-direction: column; gap: 18px; }
  header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
  header p { margin: 0; color: var(--sg-muted, #64748b); font-size: 13.5px; line-height: 1.5; }
  code { background: var(--sg-row-hover-bg, #eef2ff); padding: 1px 5px; border-radius: 5px; font-size: 12px; }
  .col { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
</style>

View this example on GitHub

More Inputs examples

• Text inputs - Typed text controls: SvNumberInput (min/max/step, grouping, precision, spinners), SvPasswordInput (reveal + strength), SvMaskedInput (pattern mask), SvPhoneInput (country dial code + national mask) and SvColorInput (swatch + palette popover). Each a SvGrid cell editor, standalone too.
• Input adornments - Leading/trailing icon snippets and prefix/suffix text affixes on SvTextInput, plus the shared clear button, sizes and invalid/readonly/disabled states - all owned by SvField's frame chrome so the whole text-input family behaves identically.
• Number input - SvNumberInput on its own: min/max/step, thousands grouping, precision, prefix/suffix, spinner buttons and the shared field contract (label, hint, required/error validation).
• Masked input - SvMaskedInput on its own: a fixed-pattern mask (# digit, A letter, * alphanumeric; other chars literal) emitting the masked + raw value and a complete flag.
• Phone input - SvPhoneInput on its own: a country dial-code selector plus a national number field emitting an E.164-ish string, with label / validation / dir.