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:

Parameter	Type	Description	Default
tags	array of strings	The array to store the tag values	[ ]
maximumTags	number	Maximum number of tags	Infinity
onlyUnique	boolean	Only allow unique tags	false
inputPlaceholderText	string	Placeholder text for the tag input field	'Add a tag'
addTagKey	string	The keyboard key that triggers the addition of a tag	'Enter'
showLabel	boolean	Show label for the input	false
labelText	string	Text for the label	'Tags'
showAddButton	boolean	Show an add button	false
addButtonText	string	Text for the add button	'Add Tag'
showClearAllButton	boolean	Show a clear all button	false
showClearAllButtonText	string	Text for the clear all button	'Clear all'
removeTagButtonText	string	Text for the tag remove button	'x'
componentWrapperClasses	string	CSS Classes for component wrapper	''
allTagsWrapperClasses	string	CSS Classes for the 'all tags' wrapper	''
tagWrapperClasses	string	CSS Classes for each tag wrapper	''
tagClasses	string	CSS Classes for each tag	''
inputClasses	string	CSS Classes for the input	''
inputButtonsSectionClasses	string	CSS Classes for the input buttons section	''
labelClasses	string	CSS Classes for label	''
removeTagButtonClasses	string	CSS Classes for the tag remove buttons	''
addButtonClasses	string	CSS Classes for the add button	''
clearAllButtonClasses	string	CSS Classes for the clear all button	''
buttonsSectionClasses	string	CSS Classes for the buttons section	''

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