Sivir UI
73

Tag Input

Enter or a comma adds the draft as a tag, and Backspace in an empty field removes the last one. Pasting text separated by commas, semicolons, or new lines adds each part.

Type a topic and press Enter.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add tag-input

Usage

Bind tags on Root, and place List and Input inside it. Duplicates are rejected unless you set allowDuplicates. Set name to submit each tag with a form.

import * as TagInput from '@sivir-ui/svelte/components/tag-input';

let tags = $state(['svelte']);

<TagInput.Root bind:tags label="Topics">
  <TagInput.List />
  <TagInput.Input placeholder="Add a topic…" />
</TagInput.Root>

Examples

Responding to changes

onAdd and onRemove report single-tag edits; onTagsChange reports the whole list.

Release alerts post to these channels.
No changes yet

Validation

Return false or an error message from validate to reject a tag. onReject receives the reason; pass it to error to show it under the field.

Lowercase, with hyphens. Try adding “Release Notes”.

Limiting tags

max caps the list. Extra tags are rejected with the code max-tags.

Up to 5 labels.

Anatomy

TagInput.Root - Owns tags and draft entry state.

TagInput.List - Groups the entered tags.

TagInput.Tag - Renders one tag with its remove control.

TagInput.Input - Accepts new tag text.