Tags Input - Skeleton

Label

Vanilla

Chocolate

Strawberry

<script lang="ts">
  import { TagsInput } from '@skeletonlabs/skeleton-svelte';
</script>

<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
  <TagsInput.Label>Label</TagsInput.Label>
  <TagsInput.Control>
    <TagsInput.Context>
      {#snippet children(tagsInput)}
        {#each tagsInput().value as value, index (index)}
          <TagsInput.Item {value} {index}>
            <TagsInput.ItemPreview>
              <TagsInput.ItemText>{value}</TagsInput.ItemText>
              <TagsInput.ItemDeleteTrigger />
            </TagsInput.ItemPreview>
            <TagsInput.ItemInput />
          </TagsInput.Item>
        {/each}
      {/snippet}
    </TagsInput.Context>
    <TagsInput.Input placeholder="Add a flavor..." />
  </TagsInput.Control>
  <TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
  <TagsInput.HiddenInput />
</TagsInput>

Custom Icon

Vanilla

Chocolate

Strawberry

<script lang="ts">
  import { CircleXIcon } from '@lucide/svelte';
  import { TagsInput } from '@skeletonlabs/skeleton-svelte';
</script>

<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
  <TagsInput.Control>
    <TagsInput.Context>
      {#snippet children(tagsInput)}
        {#each tagsInput().value as value, index (index)}
          <TagsInput.Item {value} {index}>
            <TagsInput.ItemPreview>
              <TagsInput.ItemText>{value}</TagsInput.ItemText>
              <TagsInput.ItemDeleteTrigger>
                <CircleXIcon class="size-4" />
              </TagsInput.ItemDeleteTrigger>
            </TagsInput.ItemPreview>
            <TagsInput.ItemInput />
          </TagsInput.Item>
        {/each}
      {/snippet}
    </TagsInput.Context>
    <TagsInput.Input placeholder="Add a flavor..." />
  </TagsInput.Control>
  <TagsInput.HiddenInput />
</TagsInput>

Color

Vanilla

Chocolate

Strawberry

<script lang="ts">
  import { TagsInput } from '@skeletonlabs/skeleton-svelte';
</script>

<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
  <TagsInput.Control>
    <TagsInput.Context>
      {#snippet children(tagsInput)}
        {#each tagsInput().value as value, index (index)}
          <TagsInput.Item {value} {index}>
            <TagsInput.ItemPreview class="preset-filled-secondary-500">
              <TagsInput.ItemText>{value}</TagsInput.ItemText>
              <TagsInput.ItemDeleteTrigger />
            </TagsInput.ItemPreview>
            <TagsInput.ItemInput />
          </TagsInput.Item>
        {/each}
      {/snippet}
    </TagsInput.Context>
    <TagsInput.Input placeholder="Add a flavor..." />
  </TagsInput.Control>
  <TagsInput.HiddenInput />
</TagsInput>

Provider Pattern

Use the Provider Pattern to gain access to the the inner component APIs.

Vanilla

Chocolate

Strawberry

<script lang="ts">
  import { TagsInput, useTagsInput } from '@skeletonlabs/skeleton-svelte';

  const id = $props.id();
  const tagsInput = useTagsInput({
    id,
    defaultValue: ['Vanilla', 'Chocolate', 'Strawberry'],
  });
</script>

<div class="w-full space-y-4">
  <TagsInput.Provider value={tagsInput}>
    <TagsInput.Control>
      <TagsInput.Context>
        {#snippet children(tagsInput)}
          {#each tagsInput().value as value, index (index)}
            <TagsInput.Item {value} {index}>
              <TagsInput.ItemPreview>
                <TagsInput.ItemText>{value}</TagsInput.ItemText>
                <TagsInput.ItemDeleteTrigger />
              </TagsInput.ItemPreview>
              <TagsInput.ItemInput />
            </TagsInput.Item>
          {/each}
        {/snippet}
      </TagsInput.Context>
      <TagsInput.Input placeholder="Add a flavor..." />
    </TagsInput.Control>
    <TagsInput.HiddenInput />
  </TagsInput.Provider>

  <!-- Programmatic Controls -->
  <div class="card preset-outlined-surface-200-800 flex justify-center items-center py-4">
    <button class="btn preset-filled" onclick={() => tagsInput().clearValue()}>Clear Tags</button>
  </div>
</div>

Direction

Label

Vanilla

Chocolate

Strawberry

<script lang="ts">
  import { TagsInput } from '@skeletonlabs/skeleton-svelte';
</script>

<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']} dir="rtl">
  <TagsInput.Label>Label</TagsInput.Label>
  <TagsInput.Control>
    <TagsInput.Context>
      {#snippet children(tagsInput)}
        {#each tagsInput().value as value, index (index)}
          <TagsInput.Item {value} {index}>
            <TagsInput.ItemPreview>
              <TagsInput.ItemText>{value}</TagsInput.ItemText>
              <TagsInput.ItemDeleteTrigger />
            </TagsInput.ItemPreview>
            <TagsInput.ItemInput />
          </TagsInput.Item>
        {/each}
      {/snippet}
    </TagsInput.Context>
    <TagsInput.Input placeholder="Add a flavor..." />
  </TagsInput.Control>
  <TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
  <TagsInput.HiddenInput />
</TagsInput>

API Reference

Root

Property	Default	Type
`ids`	-	Partial<{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item: (opts: ItemProps) => string; itemDeleteTrigger: (opts: ItemProps) => string; itemInput: (opts: ItemProps) => string; }> \| undefined The ids of the elements in the tags input. Useful for composition.
`translations`	-	IntlTranslations \| undefined Specifies the localized strings that identifies the accessibility elements and their states
`maxLength`	-	number \| undefined The max length of the input.
`delimiter`	","	string \| RegExp \| undefined The character that serves has: - event key to trigger the addition of a new tag - character used to split tags when pasting into the input
`autoFocus`	-	boolean \| undefined Whether the input should be auto-focused
`disabled`	-	boolean \| undefined Whether the tags input should be disabled
`readOnly`	-	boolean \| undefined Whether the tags input should be read-only
`invalid`	-	boolean \| undefined Whether the tags input is invalid
`required`	-	boolean \| undefined Whether the tags input is required
`editable`	true	boolean \| undefined Whether a tag can be edited after creation, by pressing `Enter` or double clicking.
`inputValue`	-	string \| undefined The controlled tag input's value
`defaultInputValue`	-	string \| undefined The initial tag input value when rendered. Use when you don't need to control the tag input value.
`value`	-	string[] \| undefined The controlled tag value
`defaultValue`	-	string[] \| undefined The initial tag value when rendered. Use when you don't need to control the tag value.
`onValueChange`	-	((details: ValueChangeDetails) => void) \| undefined Callback fired when the tag values is updated
`onInputValueChange`	-	((details: InputValueChangeDetails) => void) \| undefined Callback fired when the input value is updated
`onHighlightChange`	-	((details: HighlightChangeDetails) => void) \| undefined Callback fired when a tag is highlighted by pointer or keyboard navigation
`onValueInvalid`	-	((details: ValidityChangeDetails) => void) \| undefined Callback fired when the max tag count is reached or the `validateTag` function returns `false`
`validate`	-	((details: ValidateArgs) => boolean) \| undefined Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.
`blurBehavior`	-	"clear" \| "add" \| undefined The behavior of the tags input when the input is blurred - `"add"`: add the input value as a new tag - `"clear"`: clear the input value
`addOnPaste`	false	boolean \| undefined Whether to add a tag when you paste values into the tag input
`max`	Infinity	number \| undefined The max number of tags
`allowOverflow`	-	boolean \| undefined Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root
`name`	-	string \| undefined The name attribute for the input. Useful for form submissions
`form`	-	string \| undefined The associate form of the underlying input element.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	-	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`onPointerDownOutside`	-	((event: PointerDownOutsideEvent) => void) \| undefined Function called when the pointer is pressed down outside the component
`onFocusOutside`	-	((event: FocusOutsideEvent) => void) \| undefined Function called when the focus is moved outside the component
`onInteractOutside`	-	((event: InteractOutsideEvent) => void) \| undefined Function called when an interaction happens outside the component
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

RootProvider

Property	Default	Type
`value`	-	() => TagsInputApi<PropTypes>
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

RootContext

Property	Default	Type
`children`	-	Snippet<[() => TagsInputApi<PropTypes>]>

Label

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"label">]> \| undefined Render the element yourself

Control

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Item

Property	Default	Type
`index`	-	string \| number
`value`	-	string
`disabled`	-	boolean \| undefined
`element`	-	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

ItemPreview

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

ItemText

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

ItemDeleteTrigger

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

ItemInput

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself

Input

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself

ClearTrigger

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

HiddenInput

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself