# 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/icons/circle-x';
	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>

```

## 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

### TagsInputRoot

| Property | 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: - event key to trigger the addition of a new tag - character used to split tags when pasting into the input Default: "," |
| `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` | boolean | undefined | Whether a tag can be edited after creation, by pressing `Enter` or double clicking. Default: true |
| `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` | boolean | undefined | Whether to add a tag when you paste values into the tag input Default: false |
| `max` | number | undefined | The max number of tags Default: Infinity |
| `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" | "rtl" | undefined | The document's text/writing direction. Default: "ltr" |
| `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 |

### TagsInputRootProvider

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

### TagsInputRootContext

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

### TagsInputLabel

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

### TagsInputControl

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

### TagsInputItem

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

### TagsInputItemPreview

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

### TagsInputItemText

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

### TagsInputItemDeleteTrigger

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

### TagsInputItemInput

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

### TagsInputInput

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

### TagsInputClearTrigger

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

### TagsInputHiddenInput

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