Forms

InputTags

A tag input that renders values as removable badges. Commit tags with Enter, a delimiter, paste, Tab, or blur, and reject duplicates automatically.

Playground

Experiment with different props in real-time.

svelte kit

Variant

Color

Size

Disabled

Basic Usage

Type and press Enter to add a tag.

svelte kit

<script lang="ts">
  import { InputTags } from 'sv5ui';

  let value = $state(['svelte', 'kit']);
</script>

<InputTags bind:value placeholder="Add a tag..." />

Custom Delimiter

The delimiter commits a tag while typing and splits pasted text.

one

<!-- Commit on space; also splits pasted text -->
<InputTags value={['one']} delimiter=" " placeholder="Space to add" />

Commit on Tab & Blur

react

<!-- Commit the pending text on Tab and on blur too -->
<InputTags
  value={['react']}
  addOnTab
  addOnBlur
  placeholder="Enter, Tab, or blur"
/>

Allow Duplicates

By default duplicate entries are rejected. Set allowDuplicates to permit them.

a a

<!-- Allow the same tag more than once -->
<InputTags value={['a', 'a']} allowDuplicates />

Limits

Cap the number of tags with max and each tag's length with maxLength.

one two

<!-- Cap the number of tags and the length of each -->
<InputTags value={['one', 'two']} max={3} maxLength={10} />

Leading Icon

design

<InputTags value={['design']} leadingIcon="lucide:tag" placeholder="Topics" />

Tag Style

Forward props to each tag Badge with tag.

primary subtle

<InputTags
  value={['primary', 'subtle']}
  tag={{ color: 'primary', variant: 'subtle' }}
/>

Variants

tag

<InputTags value={['tag']} variant="outline" />
<InputTags value={['tag']} variant="soft" />
<InputTags value={['tag']} variant="subtle" />
<InputTags value={['tag']} variant="ghost" />

Sizes

tag

<InputTags value={['tag']} size="xs" />
<InputTags value={['tag']} size="md" />
<InputTags value={['tag']} size="xl" />

Disabled & Readonly

locked

<InputTags value={['locked']} disabled />
<InputTags value={['locked']} readonly />

Form Field

Each tag is submitted as its own hidden input, readable with FormData.getAll(name).

Skills

Add at least one skill

<script lang="ts">
  import { InputTags, FormField } from 'sv5ui';

  let skills = $state<string[]>([]);
  const error = $derived(skills.length === 0 ? 'Add at least one skill' : '');
</script>

<FormField label="Skills" {error}>
  <!-- Submits one hidden input per tag under this name -->
  <InputTags bind:value={skills} name="skills" placeholder="Add a skill..." />
</FormField>

UI Slots

Use the ui prop to override classes.

Slot	Description
`root`	`The field wrapper containing tags and input`
`base`	`The text input element`
`tag`	`Each tag Badge`
`tagDelete`	`The per-tag delete button`
`tagDeleteIcon`	`The delete button icon`
`leading`	`The leading icon/avatar area`
`trailing`	`The trailing icon area`

Props

Prop	Type	Default	Description
`value`	`string[]`	`[]`	`Current tags (bindable)`
`onValueChange`	`(value: string[]) => void`	`-`	`Callback when a tag is added or removed`
`max`	`number`	`-`	`Maximum number of tags`
`maxLength`	`number`	`-`	`Maximum length of a single tag`
`delimiter`	`string`	`','`	`Char that commits a tag and splits pastes`
`addOnPaste`	`boolean`	`true`	`Split pasted text into tags`
`addOnTab`	`boolean`	`false`	`Commit pending text on Tab`
`addOnBlur`	`boolean`	`false`	`Commit pending text on blur`
`allowDuplicates`	`boolean`	`false`	`Allow the same tag more than once`
`tag`	`BadgeProps`	`-`	`Props forwarded to each tag Badge`
`tagSlot`	`Snippet<[{ tag, index }]>`	`-`	`Custom content per tag`
`deleteIcon`	`string`	`icons.close`	`Per-tag delete icon`
`leadingIcon`	`string`	`-`	`Icon before the tags`
`trailingIcon`	`string`	`-`	`Icon after the input`
`avatar`	`AvatarProps`	`-`	`Avatar before the tags`
`variant`	`'outline' \| 'soft' \| 'subtle' \| 'ghost' \| 'none'`	`'outline'`	`Visual style`
`color`	`ColorType`	`'primary'`	`Focus and highlight color`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Field size`
`disabled`	`boolean`	`false`	`Disable interaction`
`readonly`	`boolean`	`false`	`Read-only field`
`required`	`boolean`	`false`	`Required while no tags are present`
`name`	`string`	`-`	`Name for hidden inputs (one per tag)`
`highlight`	`boolean`	`false`	`Force the focus ring`
`ref`	`HTMLInputElement \| null`	`null`	`Bindable reference`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

InputNumber RadioGroup