Password input

What this example shows

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

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

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.

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.