UI Elements

TagsInput

An input component for adding, removing, and managing multiple tags or labels.

tags input value

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

Svelte
<div class="whole">
  <span class="aux" conditional>
    {#each values as text, i}
      <span class="label">
        {#if label}
          {label}
        {:else}
          {text}
        {/if}
        <button class="extra">
          {#if extra}
            {extra}
          {:else}
            <!-- Default Icon -->
          {/if}
        </button>
      </span>
    {/each}
  </span>
  <input class="main" type="text" {...attributes} aria-errormessage={ariaErrMsgId} bind:value bind:this={element} use:action />
</div>

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface TagsInputProps {
  label?: Snippet<[string, string]>; // Snippet<[value,variant]>
  extra?: Snippet<[string, string]>; // Snippet<[value,variant]>
  values?: string[]; // bindable
  value?: string; // bindable
  type?: "left" | "right"; // ("left")
  confirm?: string[]; // (["Enter"])
  trim?: boolean; // (true)
  unique?: boolean; // (true)
  ariaErrMsgId?: string; // bindable
  events?: TagsInputEvents;
  attributes?: HTMLInputAttributes;
  action?: Action;
  element?: HTMLInputElement; // bindable
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
}

Additional Props

  • type - When set to "right", swaps the positions of the tags and the input element
  • confirm - Array of keys that trigger tag addition
  • trim - Trims whitespace from tag text when adding
  • unique - When true, duplicate values are ignored
  • events - Functions that can prevent adding and removing tags

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-tags-input

Exports

Types

TypeScript
interface TagsInputEvents { // cancel if returns true
  onadd?: (values: string[], value: string) => void | boolean;
  onremove?: (values: string[], value: string, index: number) => void | boolean;
}
type TagsInputReqdProps = never;
type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "variant" | "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

tags input value

With Interactive Variant

Preset for Demo
Enter variant as you like
apple orange