Tags Input

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

	// State
	let flavors = $state(['Vanilla', 'Chocolate', 'Stawberry']);
</script>

<TagsInput name="example" bind:value={flavors} placeholder="Add Tag..." />

<script lang="ts">
	import { TagsInput } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import IconDelete from 'lucide-svelte/icons/circle-x';

	// State
	let flavors = $state(['Vanilla', 'Chocolate', 'Stawberry']);
</script>

<TagsInput bind:value={flavors} placeholder="Add Tag...">
	{#snippet buttonDelete()}<IconDelete class="size-4" />{/snippet}
</TagsInput>

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

	// State
	let flavors = $state(['Vanilla', 'Chocolate', 'Stawberry']);
</script>

<section class="w-full space-y-4">
	<TagsInput bind:value={flavors} placeholder="Add Tag..." tagBackground="preset-filled-primary-500" />
	<TagsInput bind:value={flavors} placeholder="Add Tag..." tagBackground="preset-filled-secondary-500" />
	<TagsInput bind:value={flavors} placeholder="Add Tag..." tagBackground="preset-filled-tertiary-500" />
</section>

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

	// State
	let flavors = $state(['Vanilla', 'Chocolate', 'Stawberry']);
</script>

<TagsInput name="example" bind:value={flavors} placeholder="Add Tag..." disabled />

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

	// State
	let flavors = $state(['Vanilla', 'Chocolate', 'Stawberry']);
</script>

<section class="w-full space-y-4">
	<p>Not Editable Tags</p>
	<TagsInput bind:value={flavors} placeholder="Add Tag..." editable={false} />
	<p>Add Tag on Paste</p>
	<TagsInput bind:value={flavors} placeholder="Add Tag..." addOnPaste />
</section>