Tags Input - Lithesome

Preview

Code

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

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

<div>
	<p class="mb-2 text-sm">What's your stack?</p>
	<Tags
		bind:value={tags}
		class={({ invalid }) => [
			'flex cursor-text items-center gap-2 border p-2',
			invalid
				? 'border-red-500'
				: ['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 }) => [
						'flex cursor-default items-stretch overflow-hidden border text-sm font-semibold',
						active
							? 'bg-teal-500 text-black'
							: 'border-zinc-400 bg-zinc-200 text-black dark:border-zinc-600 dark:bg-zinc-800 dark:text-white'
					]}
				>
					<span class="py-1.5 pr-1 pl-2.5">{tag}</span>
					<TagsDelete
						value={tag}
						class="flex cursor-pointer items-center px-1.5 hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black"
					>
						<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>

<span class="site-value">{tags}</span>

Basic Example

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

	let tags = $state([]);
</script>

<Tags bind:value={tags}>
	<div class="inline-flex flex-wrap gap-1">
		{#each tags as tag}
			<TagsItem value={tag}>
				<span>{tag}</span>
				<TagsDelete value={tag}>X</TagsDelete>
			</TagsItem>
		{/each}
	</div>
	<TagsInput />
</Tags>

API Reference

<Tags />

Property	Type	Description
`value`	string[]	The current value.
`disabled`	boolean	Disables the entire group, stops all events from firing.
`max`	number	The maximum allowed of tags.
`whitelist`	string[]	Allow only these strings to be added to the `value` prop.
`blacklist`	string[]	Don't allow these string to be addeed to the `value` prop.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`activeTag`	string \| null	The value if the selected tag via keyboard navigation.
`invalid`	boolean	True if: - Input value is less than 1. - Tag already exists. - Tag isn't in the whitelist. - Tag isn't allowed by the blacklist.

<TagsInput />

Property	Type	Description
`ref`	E	The reference to the underlying element.

State	Type	Description
`invalid`	boolean	True if: - Input value length is less than 1. - Tag already exists. - Tag isn't in the whitelist. - Tag isn't allowed by the blacklist.

<TagsItem />

Property	Type	Description
`value`	string	The value of the tag.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`active`	boolean	True if selected via keyboard navigation.

<TagsDelete />

Property	Type	Description
`value`	string	The value of the item to remove.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.