Tags Input
Enter a list of tags as removable chips.
svelte tailwind
<script lang="ts">
import { TagsInput } from "$lib/components/ui/tags-input";
let value = $state(["svelte", "tailwind"]);
</script>
<TagsInput bind:value placeholder="Add a tag…" class="max-w-sm" />Press Enter or , to add a tag, and Backspace (on an empty field) to remove the last one.
Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the tags-input source from the registry into $lib/components/ui/tags-input.
Usage
<script lang="ts">
import { TagsInput } from '$lib/components/ui/tags-input';
let value = $state(['svelte', 'tailwind']);
</script>
<TagsInput bind:value placeholder="Add a tag…" />