Form

What this example shows

SvForm - a schema-driven signup form that wires the whole kit (text, email, password, select, date, switch, rating) with required + cross-field custom validation, in a responsive two-column grid. Copy-paste ready.

Imports, features and API used

Imports: @svgrid/grid

Source code (322-form.svelte)

<script lang="ts">
  /**
   * SvForm - a schema-driven signup form that wires the whole kit (text, email,
   * password, select, date, switch, rating) with required + cross-field custom
   * validation, in a responsive two-column grid. Copy-paste ready.
   */
  import { SvForm, rules } from '@svgrid/grid'
  import type { FormField } from '@svgrid/grid'

  // Declarative rules from the shared library - email / minLength / cross-field
  // compare - instead of hand-written closures.
  const fields: FormField[] = [
    { name: 'firstName', label: 'First name', required: true },
    { name: 'lastName', label: 'Last name', required: true },
    { name: 'email', label: 'Work email', type: 'email', required: true, full: true,
      rules: [rules.email()] },
    { name: 'password', label: 'Password', type: 'password', required: true,
      rules: [rules.minLength(8), rules.pattern(/\d/, { message: 'Include a number' })] },
    { name: 'confirm', label: 'Confirm password', type: 'password', required: true,
      rules: [rules.compare('password', '===', { message: 'Passwords do not match' })] },
    { name: 'role', label: 'Role', type: 'select', required: true, options: [
      { value: 'dev', label: 'Developer' }, { value: 'design', label: 'Designer' },
      { value: 'pm', label: 'Product manager' }, { value: 'other', label: 'Other' },
    ] },
    { name: 'startDate', label: 'Start date', type: 'date' },
    { name: 'newsletter', label: 'Send me product updates', type: 'switch' },
    { name: 'experience', label: 'Rate your Svelte experience', type: 'rating', full: true },
  ]

  let result = $state<string>('')
</script>

<div class="wrap">
  <header>
    <h2>Form</h2>
    <p>A schema-driven form: declare fields, get labels, the right control per type, required + custom (cross-field) validation and a gated submit.</p>
  </header>

  <div class="card">
    <SvForm {fields} columns={2} submitLabel="Create account"
      initial={{ role: 'dev', experience: 3 }}
      onSubmit={(v) => { result = JSON.stringify(v, null, 2) }} />
  </div>

  {#if result}
    <pre class="result">{result}</pre>
  {/if}
</div>

<style>
  .wrap { padding: 20px; max-width: 620px; display: flex; flex-direction: column; gap: 16px; }
  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; }
  .card { padding: 20px; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; }
  .result { margin: 0; padding: 14px; background: var(--sg-header-bg, #f8fafc); border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px; font-size: 12px; overflow: auto; }
</style>

View this example on GitHub

Related documentation

• SvForm

Related articles

• Avoiding Layout Thrash in Custom Grid Cells - Layout thrash from interleaved DOM reads and writes is the most common cause of scroll jank in grids with custom cells - here is how to find it and design your way out of it.
• Reducing Re-Renders in SvGrid with $derived - Svelte 5's $derived memoizes your row pipeline so the grid recomputes only when filter inputs actually change - not on every unrelated state update.
• Reactivity with Large Arrays and Objects in Svelte 5 - Deep proxies are powerful but not free. Here is when to pay the cost and when to use $state.raw to keep bulk data loads fast in a SvGrid app.

More Layout examples

• Account & security settings console - A real SaaS settings surface composed from the UI kit: SvMenubar app bar, promise + Undo-action toasts on save, SvPopconfirm on destructive rows, SvHoverCard teammate previews, and frame input adornments (leading icons, prefix affixes, masked API key). Profile / Team / Security tabs over SvCard + SvStat.
• Invoice builder - An adornment-heavy money form: currency prefixes, % suffixes, masked tax IDs (frame adornments), line items with SvPopconfirm delete + Undo action toasts, live SvStat totals, an SvHoverCard tax hint, and a promise toast on Send. Pure UI-kit composition.
• Operations KPI dashboard - A KPI console: SvStat + SvSparkline tiles, an SvGauge SLA dial, SvHoverCard drill-down previews per service, an SvMenubar toolbar (View / Range / Actions) and a promise toast on Refresh. Pure UI-kit composition, no grid dependency.
• Form: rich field types - SvForm reaching the whole input suite from one schema - phone, country, mask, combobox, radio, slider, tags, datetime and file - plus per-field help text, a readonly field, column span, and a promise toast on submit.
• Form: cascading fields - SvForm dependent selects - a child list derives from the parent value via a function `options`, and `dependsOn` clears the child when the parent changes so a stale selection never lingers. Country -> State -> City.