TokenInput

A multi-value entry field — type and press Enter (or comma) to add a token; each is a removable Chip. Backspace on an empty field removes the last. Wears FieldChrome; composes Chip. Shared variant/size axes.

Basic

Values: [svelte, ui, tokens]

Tags

svelte ui tokens

<script>
  import { TokenInput } from '@spaethtech/svelte-ui';
  let tags = $state(['svelte', 'ui']);
</script>

<!-- Type + Enter or comma to add; × or Backspace-on-empty to remove -->
<TokenInput bind:values={tags} label="Tags" placeholder="Add a tag…" />

Empty + variant

Recipients

Press Enter or comma after each address.

Max + duplicates; sizes

Up to 4 (dupes ok)

one two

<TokenInput bind:values={limited} max={4} allowDuplicates
  label="Up to 4" description="Duplicates allowed; capped at 4." />