Text inputs

About this example

The typed text controls of the SvGrid UI kit in Svelte 5: SvNumberInput with min, max, step, thousands grouping, precision, a prefix and spinner buttons, SvPasswordInput with a reveal toggle and a strength meter, SvMaskedInput with a pattern mask that reports the masked and raw value, SvPhoneInput with a country dial code and national mask, and SvColorInput with a swatch that opens a palette popover. Each emits a clean value, themes from the --sg-* tokens and doubles as a grid cell editor.

Text inputs - the SvGrid UI kit's typed text controls. Each emits a clean value and themes from --sg-* tokens. Standalone or as grid cell editors.

Imports, features and API used

Imports: @svgrid/grid

Frequently asked questions

What value does each control emit?

SvNumberInput a number, SvPasswordInput and SvPhoneInput a string, SvColorInput a hex string, and SvMaskedInput both the masked display text and the raw characters, so your state never holds formatting.

How do the inputs become grid cell editors?

Through editorType on a column: number, password, masked, phone and color mount the same components inside the cell with the column's options.

Do they share a look?

Yes. They are built on the same field frame, so size, focus ring, invalid state and the clear button behave identically across the family and follow the active theme.

Related documentation

• Inputs
• SvTextInput

Related articles

• A Right-Click Context Menu for Your Svelte Data Grid - Build a right-click context menu that wires row actions, handles multi-row selection, and stays out of the way of SvGrid's own event handling.
• 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 (254-text-inputs.svelte)

<script lang="ts">
  /**
   * Text inputs - the SvGrid UI kit's typed text controls. Each emits a clean
   * value and themes from --sg-* tokens. Standalone or as grid cell editors.
   */
  import { SvNumberInput, SvPasswordInput, SvMaskedInput, SvPhoneInput, SvColorInput } from '@svgrid/grid'

  let qty = $state<number | null>(1250.5)
  let pw = $state('Sv-Grid!23')
  let card = $state('')
  let phone = $state('+14155551234')
  let color = $state('#6366f1')
</script>

<div class="wrap">
  <header>
    <h2>Text inputs</h2>
    <p>Typed text controls from <code>@svgrid/grid</code>: numeric, password, masked, phone and color. Each is theme-driven and works standalone or as a grid cell editor.</p>
  </header>

  <div class="grid">
    <div class="cell">
      <label>SvNumberInput <span class="muted">(min 0, max 100k, grouping, 2dp)</span></label>
      <SvNumberInput value={qty} onChange={(v) => (qty = v)} min={0} max={100000} step={10} precision={2} grouping prefix="$" />
      <code class="out">{qty}</code>
    </div>

    <div class="cell">
      <label>SvPasswordInput <span class="muted">(reveal + strength)</span></label>
      <SvPasswordInput value={pw} onChange={(v) => (pw = v)} showStrength />
    </div>

    <div class="cell">
      <label>SvMaskedInput <span class="muted">(card: #### #### #### ####)</span></label>
      <SvMaskedInput mask="#### #### #### ####" onChange={(_m, raw) => (card = raw)} />
      <code class="out">raw: {card || '-'}</code>
    </div>

    <div class="cell">
      <label>SvPhoneInput <span class="muted">(country + national mask)</span></label>
      <SvPhoneInput value={phone} onChange={(v) => (phone = v)} />
      <code class="out">{phone}</code>
    </div>

    <div class="cell">
      <label>SvColorInput <span class="muted">(swatch + palette popover)</span></label>
      <SvColorInput value={color} onChange={(v) => (color = v)} />
      <code class="out">{color}</code>
    </div>
  </div>
</div>

<style>
  .wrap { padding: 22px; max-width: 780px; 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; max-width: 620px; }
  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-fill, minmax(280px, 1fr)); gap: 20px 28px; }
  .cell { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
  label { font-size: 12.5px; font-weight: 600; }
  .muted { color: var(--sg-muted, #64748b); font-weight: 400; }
  .out { align-self: stretch; }
</style>

View this example on GitHub

More Inputs examples

• 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.
• 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.