Color input

What this example shows

SvColorInput on its own - a swatch that opens a portalled popover with a hex field, the native picker and a preset palette. Emits a hex string; the popover animates in. The SvGrid color cell editor, standalone.

Imports, features and API used

Imports: @svgrid/grid

Source code (304-color-input.svelte)

<script lang="ts">
  /**
   * SvColorInput on its own - a swatch that opens a portalled popover with a hex
   * field, the native picker and a preset palette. Emits a hex string; the
   * popover animates in. The SvGrid color cell editor, standalone.
   */
  import { SvColorInput } from '@svgrid/grid'

  let brand = $state('#2563eb')
  let accent = $state('#f59e0b')
  let custom = $state('#10b981')
  const palette = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#10b981', '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899', '#0f172a']
</script>

<div class="wrap">
  <header>
    <h2>Color input</h2>
    <p><code>SvColorInput</code> - swatch + hex field + native picker + preset palette in a portalled, animated popover.</p>
  </header>

  <div class="row">
    <label class="cell">Brand
      <SvColorInput value={brand} onChange={(v) => (brand = v)} />
      <span class="val">{brand}</span>
    </label>
    <label class="cell">Accent
      <SvColorInput value={accent} onChange={(v) => (accent = v)} />
      <span class="val">{accent}</span>
    </label>
    <label class="cell">Custom palette
      <SvColorInput value={custom} {palette} onChange={(v) => (custom = v)} />
      <span class="val">{custom}</span>
    </label>
  </div>

  <div class="preview" style:--a={brand} style:--b={accent} style:--c={custom}>
    <span>Live preview</span>
  </div>
</div>

<style>
  .wrap { padding: 20px; max-width: 600px; display: flex; flex-direction: column; gap: 20px; }
  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; }
  .row { display: flex; gap: 22px; flex-wrap: wrap; }
  .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; text-transform: lowercase; }
  .preview {
    height: 80px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; letter-spacing: 0.02em;
    background: linear-gradient(120deg, var(--a), var(--b), var(--c));
  }
</style>

View this example on GitHub

Related documentation

• SvColorInput

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.
• Conditional Formatting - Color Cells by Their Value - Four rule types, one prop - add heatmaps, data bars, icon sets, and threshold highlights to any SvGrid column without custom cell renderers.

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