Tags input

About this example

SvTagsInput in Svelte 5 as a token editor: type and press Enter or comma to add a chip, Backspace or the chip's x to remove one, with unique values and a max count enforced, shown as a skills field and an email recipients field with validation.

SvTagsInput - a production token editor: type + Enter/comma to add, Backspace or the chip x to remove. Unique + max enforced. Copy-paste ready.

Imports, features and API used

Imports: @svgrid/grid

Frequently asked questions

How do I limit the number of tags?

Set max. Once it is reached the input stops accepting new tokens until one is removed, and the count can be shown in the hint.

Can I validate each tag?

Yes. Check the array in onChange and reject entries that fail, for example invalid email addresses, and pass invalid with an error message to show it.

Are duplicates allowed?

No. Adding a value that already exists is ignored, so the array is always unique.

Related documentation

• SvTagsInput

Related articles

• Stable Row Identity in SvGrid (and why it matters) - How SvGrid tracks rows across mutations, why object reference stability is the key to correct selection and editing, and the exact patterns to use with live data feeds.
• A Fill Handle (Drag to Fill) in SvGrid - Build a working spreadsheet-style fill handle on top of SvGrid's cell selection and editing - pointer tracking, range highlighting, series fill, and undo/redo integration all covered.
• 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 (316-tags-input.svelte)

<script lang="ts">
  /**
   * SvTagsInput - a production token editor: type + Enter/comma to add, Backspace
   * or the chip x to remove. Unique + max enforced. Copy-paste ready.
   */
  import { SvTagsInput } from '@svgrid/grid'

  let skills = $state<string[]>(['Svelte', 'TypeScript', 'CSS'])
  let recipients = $state<string[]>([])
  let submitted = $state(false)
  const recipientsError = $derived(submitted && recipients.length === 0 ? 'Add at least one recipient' : undefined)
</script>

<div class="wrap">
  <header>
    <h2>Tags input</h2>
    <p>An editable set of tokens - skills, labels, email recipients, filters. Rejects duplicates and caps the count.</p>
  </header>

  <section class="block">
    <h3>Skills (max 6, unique)</h3>
    <SvTagsInput value={skills} max={6} placeholder="Add a skill..." onChange={(v) => (skills = v)} />
    <p class="out">{skills.length}/6 tags</p>
  </section>

  <section class="block">
    <SvTagsInput
      value={recipients}
      label="Recipients"
      hint="Press Enter or comma to add"
      required
      invalid={!!recipientsError}
      error={recipientsError}
      placeholder="[email protected]"
      onChange={(v) => (recipients = v)}
    />
    <button class="btn" onclick={() => (submitted = true)}>Send invites</button>
  </section>
</div>

<style>
  .wrap { padding: 20px; max-width: 460px; 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; }
  .block h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sg-muted, #64748b); }
  .out { margin: 8px 0 0; font-size: 12px; color: var(--sg-muted, #94a3b8); }
  .btn { margin-top: 12px; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px; border: 0; border-radius: 8px; background: var(--sg-accent, #2563eb); color: var(--sg-on-accent, #fff); cursor: pointer; }
</style>

View this example on GitHub

More Selection examples

• Selection controls - List and overlay pickers: SvListBox (inline multi-select), SvDropDownList, SvComboBox (type to filter), SvAutoComplete (free text + suggestions), SvTagsInput (chips) and SvCountryInput (searchable, flags). Every popover portals out of the scroll container. Grid cell editors, standalone too.
• List box - SvListBox: an assignee picker - inline multi-select with grouped options (departments), roving keyboard + type-ahead and a live summary.
• Combo box - SvComboBox: a form field - type to filter a grouped, portalled list; the value must come from the list. With label + required validation.
• Drop-down list - SvDropDownList: a status / priority toolbar with grouped options, type-ahead and animated portalled panels driving a live issue list.
• Autocomplete - SvAutoComplete: a free-text search field with live suggestion shortcuts (any value accepted) - city search and a filter-syntax helper.