# Tags Input
Allows input of multiple values.
```svelte
Label
{#snippet children(tagsInput)}
{#each tagsInput().value as value, index (index)}
{value}
{/each}
{/snippet}
Clear All
```
## Custom Icon
```svelte
{#snippet children(tagsInput)}
{#each tagsInput().value as value, index (index)}
{value}
{/each}
{/snippet}
```
## Color
```svelte
{#snippet children(tagsInput)}
{#each tagsInput().value as value, index (index)}
{value}
{/each}
{/snippet}
```
## Provider Pattern
Use the [Provider Pattern](/docs/get-started/fundamentals#provider-pattern) to gain access to the the inner component APIs.
```svelte
{#snippet children(tagsInput)}
{#each tagsInput().value as value, index (index)}
{value}
{/each}
{/snippet}
```
## Direction
```svelte
Label
{#snippet children(tagsInput)}
{#each tagsInput().value as value, index (index)}
{value}
{/each}
{/snippet}
Clear All
```
## API Reference
| 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 |
| value | - | () => TagsInputApi\ |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| children | - | Snippet\<\[() => TagsInputApi\]> |
| element | - | Snippet\<\[HTMLAttributes\<"label">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| index | - | string \| number |
| value | - | string |
| disabled | - | boolean \| undefined |
| element | - | Snippet\<\[HTMLAttributes\<"span">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"span">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"button">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"input">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"input">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"button">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"input">]> \| undefined — Render the element yourself |