Number input

What this example shows

SvNumberInput on its own - min/max/step, thousands grouping, precision, prefix/suffix, spinner buttons, plus the shared field contract (label, hint, required/error validation). The SvGrid number cell editor, standalone.

Imports, features and API used

Imports: @svgrid/grid

Source code (300-number-input.svelte)

<script lang="ts">
  /**
   * SvNumberInput on its own - min/max/step, thousands grouping, precision,
   * prefix/suffix, spinner buttons, plus the shared field contract (label, hint,
   * required/error validation). The SvGrid number cell editor, standalone.
   */
  import { SvNumberInput } from '@svgrid/grid'

  let qty = $state<number | null>(3)
  let price = $state<number | null>(1299.5)
  let pct = $state<number | null>(20)
  let budget = $state<number | null>(null)
  const budgetError = $derived(budget == null ? 'Enter a budget' : budget < 100 ? 'Minimum is 100' : undefined)
</script>

<div class="wrap">
  <header>
    <h2>Number input</h2>
    <p><code>SvNumberInput</code> - typed numeric entry with clamping, grouping, precision and spinners. Emits <code>number | null</code>.</p>
  </header>

  <div class="grid">
    <label class="cell">Quantity (0-99, step 1)
      <SvNumberInput value={qty} min={0} max={99} step={1} onChange={(v) => (qty = v)} />
      <span class="val">{qty}</span>
    </label>

    <label class="cell">Price (grouped, 2dp, prefix)
      <SvNumberInput value={price} min={0} precision={2} grouping prefix="$" step={0.5} selectOnFocus wheelStep onChange={(v) => (price = v)} />
      <span class="val">{price}</span>
    </label>

    <label class="cell">Percent (suffix, no spinners)
      <SvNumberInput value={pct} min={0} max={100} suffix="%" spinButtons={false} onChange={(v) => (pct = v)} />
      <span class="val">{pct}</span>
    </label>

    <div class="cell">
      <SvNumberInput
        value={budget}
        label="Monthly budget"
        hint="At least 100 - clearable"
        prefix="$"
        grouping
        clearable
        required
        invalid={!!budgetError}
        error={budgetError}
        onChange={(v) => (budget = v)}
      />
    </div>
  </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(220px, 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; }
</style>

View this example on GitHub

Related documentation

• SvNumberInput

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.
• Locale-Aware Number, Date, and Currency Formatting - How SvGrid keeps raw primitives in the row model while rendering locale-correct display strings - so sort and filter never silently break.

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