# Tags Input

Allows input of multiple values.

```svelte
<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

```svelte
<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

```svelte
<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](/docs/get-started/fundamentals#provider-pattern) to gain access to the the inner component APIs.

```svelte
<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

```svelte
<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

### TagsInputRootProps

| Property              | Default  | Type                                                                                                                                                                                                                                                       | Description                                                                                                                                         |
| --------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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:&#xA;- event key to trigger the addition of a new tag&#xA;- 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.&#xA;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.&#xA;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.&#xA;Useful for preventing duplicates or invalid tag values.                           |
| blurBehavior?         | -        | "clear" \| "add" \| undefined                                                                                                                                                                                                                              | The behavior of the tags input when the input is blurred&#xA;- \`"add"\`: add the input value as a new tag&#xA;- \`"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,&#xA;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                                                                                                                         |

### TagsInputRootProviderProps

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

### TagsInputRootContextProps

| Property | Default | Type                                        | Description |
| -------- | ------- | ------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => TagsInputApi\<PropTypes>]> | -           |

### TagsInputLabelProps

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

### TagsInputControlProps

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

### TagsInputItemProps

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

### TagsInputItemPreviewProps

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

### TagsInputItemTextProps

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

### TagsInputItemDeleteTriggerProps

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

### TagsInputItemInputProps

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

### TagsInputInputProps

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

### TagsInputClearTriggerProps

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

### TagsInputHiddenInputProps

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