Input editors: text, textarea, OTP, duration, multi-select

What this example shows

The Tier-1 input editors: SvTextInput, SvTextArea, SvOtpInput, SvDurationInput and SvMultiSelect. Each is a standalone control on the shared editor contract (label / hint / error / a11y) that also works as a SvGrid cell editor via the interaction contract.

Imports, features and API used

Imports: @svgrid/grid

Source code (334-input-editors.svelte)

<script lang="ts">
  /**
   * The Tier-1 input editors: SvTextInput, SvTextArea, SvOtpInput,
   * SvDurationInput and SvMultiSelect. Each is a standalone control on the shared
   * editor contract (label / hint / error / a11y) that also works as a SvGrid
   * cell editor via the interaction contract.
   */
  import {
    SvTextInput, SvTextArea, SvOtpInput, SvDurationInput, SvMultiSelect,
    type MultiSelectOption,
  } from '@svgrid/grid'

  let name = $state('Ada Lovelace')
  let email = $state('')
  let bio = $state('')
  let code = $state('')
  let minutes = $state<number | null>(90)
  let tags = $state<Array<string | number>>(['svelte', 'grid'])

  const tagOptions: MultiSelectOption[] = [
    { value: 'svelte', label: 'Svelte' },
    { value: 'grid', label: 'Data grid' },
    { value: 'ts', label: 'TypeScript' },
    { value: 'a11y', label: 'Accessibility' },
    { value: 'charts', label: 'Charts' },
    { value: 'forms', label: 'Forms' },
  ]
</script>

<div class="wrap">
  <header>
    <h2>Input editors</h2>
    <p>Standalone controls that double as grid cell editors: Enter commits, Escape cancels, all themed from the grid's <code>--sg-*</code> tokens.</p>
  </header>

  <section>
    <h3>Text &amp; textarea</h3>
    <div class="row">
      <SvTextInput label="Name" value={name} onChange={(v) => (name = v)} clearable />
      <SvTextInput label="Email" type="email" value={email} onChange={(v) => (email = v)} placeholder="[email protected]" />
    </div>
    <SvTextArea label="Bio" value={bio} onChange={(v) => (bio = v)} rows={3} maxlength={140} showCount autoGrow placeholder="A short bio…" />
  </section>

  <section>
    <h3>OTP &amp; duration</h3>
    <div class="row">
      <div>
        <div class="lbl">Verification code</div>
        <SvOtpInput length={6} value={code} onChange={(v) => (code = v)} onComplete={(v) => console.log('code', v)} />
      </div>
      <SvDurationInput label="Estimate" value={minutes} onChange={(m) => (minutes = m)} style="units" />
    </div>
  </section>

  <section>
    <h3>Multi-select</h3>
    <SvMultiSelect label="Topics" options={tagOptions} value={tags} onChange={(v) => (tags = v)} maxTagCount={3} />
    <p class="muted">Selected: {tags.join(', ') || '(none)'}</p>
  </section>
</div>

<style>
  .wrap { padding: 20px; max-width: 820px; display: flex; flex-direction: column; gap: 22px; }
  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; }
  header code { background: var(--sg-row-hover-bg, #f1f5f9); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
  section h3 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sg-muted, #64748b); }
  .row { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
  .lbl { font-size: 12.5px; font-weight: 600; color: var(--sg-fg, #0f172a); margin-bottom: 5px; }
  .muted { color: var(--sg-muted, #94a3b8); font-size: 12.5px; margin: 10px 0 0; }
</style>

View this example on GitHub

Related documentation

• SvDurationInput
• SvMultiSelect
• SvOtpInput
• SvTextArea
• SvTextInput

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.
• 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.
• Multi-Level (Grouped) Column Headers in SvGrid - Band related columns under a shared parent header using SvGrid's nested column definition - how to nest, pin, combine with sorting and filtering, and when NOT to use grouping.

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.