Tag Input

A field that turns typed text into removable tags. Type a value, press Enter, and keep going.

Topics

Type a topic and press Enter.

2 topics

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add tag-input

Usage

Bind tags for the tag list. Compose List for the tokens and Input for entry inside Root.

import * as TagInput from '$lib/sivir/components/tag-input';

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

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

Examples

Read changes through callbacks, guard the list with validation, and cap it with a maximum.

Responding to changes

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

Channels

Every change reports through callbacks.

Validation

Return false or an error message from validate to reject a tag. Rejections arrive through onReject with a human-readable reason.

Slugs

Lowercase slugs, no spaces — try “Release Notes”.

Limiting tags

max caps the list. Extra tags are rejected with a max-tags reason.

Labels

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.