Tags

Display submitted tags one by one.

<script lang="ts">
	import { Tags, TagsInput, TagsItem, TagsDelete } from 'lithesome';
	import { cn } from '$site/utils.js';
	import { XIcon } from 'lucide-svelte';

	let tags = $state<string[]>(['svelte5', 'typescript', 'tailwind']);
</script>

<div>
	<p class="mb-2 text-sm">What's your stack?</p>
	<Tags
		bind:value={tags}
		editable
		class={cn(
			'flex cursor-text items-center gap-2 rounded-md border p-2',
			'border-neutral-300 dark:border-neutral-800',
			'focus-within:border-dark dark:focus-within:border-white'
		)}
	>
		<div class="inline-flex flex-wrap gap-1">
			{#each tags as tag}
				<TagsItem
					value={tag}
					class={({ active }) =>
						cn(
							'flex cursor-default items-stretch overflow-hidden rounded-md text-sm font-semibold',
							active ? 'bg-teal-500 text-black' : 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
						)}
				>
					<span class="py-1.5 pl-2.5 pr-1">{tag}</span>
					<TagsDelete
						value={tag}
						class="px-1.5 hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black"
						{tag}
					>
						<XIcon class="size-4" />
					</TagsDelete>
				</TagsItem>
			{/each}
		</div>
		<TagsInput
			class={({ invalid }) =>
				cn('h-8 border-transparent bg-transparent focus:outline-none', invalid ? 'text-red-500' : '')}
		/>
	</Tags>
</div>

<div class="absolute bottom-2 right-2 text-xs opacity-20">
	{tags}
</div>

Prop	Type	Description
`value` *	`string[]` `Default: []`	The current value of the tag input
`disabled`	`boolean` `Default: false`	Disables the whole tags component(s)
`max`	`number` `Default: ——`	The max amount of tags allows at once
`whitelist`	`string[]` `Default: ——`	Only allow a set of words
`blacklist`	`string[]` `Default: ——`	Disallow a set of words
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-tags`	`''`	The base data attribute, can be used for styling.

Event	Param & Return	Description
`onClick`	`(e: MouseEvent)` `void`

Data attribute	Value	Description
`data-tagsinput`	`''`	The base data attribute, can be used for styling.

Event	Param & Return	Description
`onKeydown`	`(e: KeyboardEvent)` `void`
`onInput`	`(e: Event)` `void`
`onBlur`	`(e: FocusEvent)` `void`

Prop	Type	Description
`value` *	`string` `Default: ——`	The value of the item. This should match with the root tags value.

Data attribute	Value	Description
`data-tagsitem`	`''`	The base data attribute, can be used for styling.

Prop	Type	Description
`value` *	`string` `Default: ——`	The value of the delete. This should match with the item.

Data attribute	Value	Description
`data-tagsdelete`	`''`	The base data attribute, can be used for styling.

Event	Param & Return	Description
`onClick`	`(e: MouseEvent)` `void`

Basic Example

<script>
	import { Tags, TagsDelete, TagsInput, TagsItem } from 'lithesome';

	let tags = $state(['svelte5', 'typescript']);
</script>

<Tags bind:value={tags}>
	{#each tags as tag}
		<TagsItem>
			{tag}
			<TagsDelete />
		</TagsItem>
	{/each}
	<TagsInput />
</Tags>