Svelte Unstyled Tags

Svelte Unstyled Tags is a customisable Tags Input Component for Svelte.

It is in development and things might change like class names.

Installation

npm install svelte-unstyled-tags
yarn add svelte-unstyled-tags
pnpm add svelte-unstyled-tags

Import it in your Svelte component like this:

import TagsInput from 'svelte-unstyled-tags';

Usage

Use the component in your Svelte files:

<script>
    let tags = [];
</script>

<TagsInput bind:tags={tags} />

You can pass tags array to component with bind:tags and pass your configuration through props.

Configuration Options

The following are the customisable options that come with the package:

Listen for changes to tags

This component dispatches a 'input' event whenever the tags array changes. You can listen for it like this:

<TagsInput bind:tags={tags} on:input="{event => console.log(event.detail)}"/>

This will log the new tags array whenever it changes.

Examples

Code examples below to make the component look like this:

Styling with Tailwind classes

Here's an example of how you might style the various parts of the component using Tailwind classes.

<Tags
    bind:tags
    componentWrapperClasses="flex flex-wrap"
    allTagsWrapperClasses="flex flex-row items-center gap-x-2 gap-y-2 flex-wrap"
    tagsInputWrapperClasses="flex items-center border-2 border-gray-200 py-2 px-3 rounded-md mt-2"
    tagWrapperClasses="flex items-center justify-between bg-blue-500 text-white px-2 py-1.5 rounded-md min-w-[5rem]"
    tagClasses="pr-4"
    tagRemoveButtonClasses="cursor-pointer rounded px-2 hover:outline"
    inputClasses="ml-4 px-2 py-2 border-b"
/>

Styling with vanilla CSS

You can also put these classes in your global .css file if you don't want to use these :global() modifiers

<Tags bind:tags />


<style>
    :global(.svelteUnstyledTagsWrapper) {
        display: flex;
        flex-wrap: wrap;
    }
    :global(.tagsInputWrapper) {
        display: flex;
        align-items: center;
        border: 2px solid #e5e7eb;
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        margin-top: 0.5rem;
    }
    :global(.allTagsWrapper) {
        display: flex;
        flex-direction: row;
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.5rem;
        flex-wrap: wrap;
    }
    :global(.tagWrapper) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #3b82f6;
        color: #ffffff;
        padding: 0.375rem 0.5rem;
        border-radius: 0.375rem;
        min-width: 5rem;
    }
    :global(.tag) {
        padding-right: 1rem;
    }
    :global(.tagRemoveButton) {
        cursor: pointer;
        border-radius: 0.125rem;
        padding: 0 0.5rem;
    }
    :global(.tagRemoveButton:hover) {
        outline: 2px auto;
    }
    :global(.tagsInput) {
        margin-left: 1rem;
        padding: 0.5rem;
        border-bottom: 1px solid #e5e7eb;
    }
</style>

Example HTML output

This is an example of the HTML markup that's created.

<div
    class="svelteUnstyledTagsWrapper"
    id="fyz9g1k7rplq0rl3c8"
>
    <label
        for="tagsInput-fyz9g1k7rplq0rl3c8"
        class="screen-reader-only"
        >Tags</label
    >
    <div class="tagsInputWrapper">
        <div
            class="allTagsWrapper"
            role="list"
        >
            <div
                class="tagWrapper"
                role="listitem"
                data-tag="tag"
                data-index="0"
            >
                <span
                    class="tag"
                    data-tag-id="tag-0"
                    >tag</span
                >
                <button class="removeTagButton">✕</button>
            </div>
            <div
                class="tagWrapper"
                role="listitem"
                data-tag="another tag"
                data-index="1"
            >
                <span
                    class="tag"
                    data-tag-id="another tag-1"
                    >another tag</span
                >
                <button class="removeTagButton">✕</button>
            </div>
            <div
                class="tagWrapper"
                role="listitem"
                data-tag="and another"
                data-index="2"
            >
                <span
                    class="tag"
                    data-tag-id="and another-2"
                    >and another</span
                >
                <button class="removeTagButton">✕</button>
            </div>
        </div>
        <div class="inputButtonsSection">
            <input
                id="tagsInput-fyz9g1k7rplq0rl3c8"
                class="tagsInput"
                type="text"
                placeholder="Add a tag"
            />
        </div>
    </div>
</div>

Licence

MIT