# Tags Input
Allows input of multiple values.
```svelte
Flavors
{#snippet children(tagsInput)}
{#each tagsInput().value as value, index (index)}
{value}
{/each}
{/snippet}
Clear All
```
> TIP: Double tap each tag to quickly and easily edit in place.
## Custom Icon
Implement any icon of your choosing for the remove action.
```svelte
{#snippet children(tagsInput)}
{#each tagsInput().value as value, index (index)}
{value}
{/each}
{/snippet}
```
## Color
Change the tag color using utility classes or custom CSS variables to match your design system.
```svelte
{#snippet children(tagsInput)}
{#each tagsInput().value as value, index (index)}
{value}
{/each}
{/snippet}
```
## Provider Pattern
Use the [Provider Pattern](/docs/\[framework]/get-started/fundamentals#provider-pattern) to gain access to the inner component APIs.
```svelte
{#snippet children(tagsInput)}
{#each tagsInput().value as value, index (index)}
{value}
{/each}
{/snippet}
```
## Direction
Set the text direction (`ltr` or `rtl`) using the `dir` prop.
```svelte
Label
{#snippet children(tagsInput)}
{#each tagsInput().value as value, index (index)}
{value}
{/each}
{/snippet}
```
## Anatomy
Here's an overview of how the TagsInput component is structured in code:
```svelte
```
## API Reference