Masked input

What this example shows

SvMaskedInput on its own - a pattern mask (# = digit, A = letter, * = alnum; other chars are literals). Emits the masked display value and the raw value, plus a `complete` flag. The SvGrid masked cell editor, standalone.

Imports, features and API used

Imports: @svgrid/grid

Source code (302-masked-input.svelte)

<script lang="ts">
  /**
   * SvMaskedInput on its own - a pattern mask (# = digit, A = letter, * = alnum;
   * other chars are literals). Emits the masked display value and the raw value,
   * plus a `complete` flag. The SvGrid masked cell editor, standalone.
   */
  import { SvMaskedInput } from '@svgrid/grid'

  let card = $state('')
  let cardRaw = $state('')
  let phone = $state('')
  let date = $state('')
  let complete = $state(false)
</script>

<div class="wrap">
  <header>
    <h2>Masked input</h2>
    <p><code>SvMaskedInput</code> - fixed-pattern entry. <code>#</code> digit, <code>A</code> letter, <code>*</code> alphanumeric; everything else is a literal.</p>
  </header>

  <div class="grid">
    <label class="cell">Credit card (clearable, icon)
      <SvMaskedInput mask="#### #### #### ####" placeholder="0000 0000 0000 0000" clearable value={card} onChange={(m, r, c) => { card = m; cardRaw = r; complete = c }}>
        {#snippet prefixIcon()}<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="5" width="20" height="14" rx="2" /><path d="M2 10h20" /></svg>{/snippet}
      </SvMaskedInput>
      <span class="val">raw: {cardRaw || '-'} &middot; {complete ? 'complete' : 'incomplete'}</span>
    </label>

    <label class="cell">Phone (US)
      <SvMaskedInput mask="(###) ###-####" placeholder="(555) 123-4567" onChange={(m) => (phone = m)} />
      <span class="val">{phone || '-'}</span>
    </label>

    <label class="cell">Date
      <SvMaskedInput mask="##/##/####" placeholder="MM/DD/YYYY" onChange={(m) => (date = m)} />
      <span class="val">{date || '-'}</span>
    </label>

    <label class="cell">Licence plate (AA-###)
      <SvMaskedInput mask="AA-###" placeholder="AB-123" />
    </label>
  </div>
</div>

<style>
  .wrap { padding: 20px; max-width: 720px; 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; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; align-items: start; }
  .cell { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sg-muted, #64748b); }
  .val { font-size: 12px; color: var(--sg-muted, #94a3b8); font-weight: 400; font-variant-numeric: tabular-nums; }
</style>

View this example on GitHub

Related documentation

• SvMaskedInput

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).
• Password input - SvPasswordInput on its own: a reveal toggle and an optional 4-level strength meter, with localizable strings and the shared field contract.
• 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.