Tag Input
kumo-svelte

Tag Input

A creatable multi-value input for values that do not come from a predefined option list.

ava@cloudflare.com
Paste comma- or newline-separated email addresses.
<script lang="ts">
  import { TagInput } from 'kumo-svelte';
  let recipients = $state(['ava@cloudflare.com']);
</script>

<TagInput
  label="Recipients"
  description="Paste comma- or newline-separated email addresses."
  placeholder="name@example.com"
  bind:value={recipients}
  validateValue={(value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)}
/>

Installation

import { TagInput } from 'kumo-svelte';

Usage

Use bind:value for controlled tags or defaultValue for uncontrolled usage. Press Enter, comma, or Tab to create a tag. Blur also commits the current value, and pasted comma- or newline-separated text creates each value synchronously. Duplicate values are ignored.

<TagInput label="Labels" bind:value={tags} placeholder="Add a label" />

Maximum values

alpha
A maximum of three groups.
<script lang="ts">
  import { TagInput } from 'kumo-svelte';
</script>

<TagInput
  defaultValue={['alpha']}
  label="Access groups"
  maxValues={3}
  description="A maximum of three groups."
  placeholder="Type a group name"
/>

Localization

Use labels to translate the fallback input name, tag removal action, invalid-value feedback, and maximum-value feedback.

API Reference

PropTypeDefaultDescription
value string[]-Controlled tag values.
defaultValue string[][]Initial uncontrolled tag values.
onValueChange (value: string[]) => void-Called whenever the tag list changes.
validateValue (value: string, acceptedValues: string[]) => boolean-Validates each candidate tag.
maxValues number-Maximum accepted tag count.
labels TagInputLabels-Localized generated labels and validation messages.
label string | Snippet-Visible label content.
description string | Snippet-Supporting description text.
error TagInputError-Validation error content.
disabled booleanfalseDisables entry and tag removal.