Tags Input · Skeleton

Label

Vanilla

Chocolate

Strawberry

tsx

import { TagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
			<TagsInput.Label>Label</TagsInput.Label>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview>
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger />
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

Label

Vanilla

Chocolate

Strawberry

svelte

<script lang="ts">
	import { TagsInput } from '@skeletonlabs/skeleton-svelte';
</script>

<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
	<TagsInput.Label>Label</TagsInput.Label>
	<TagsInput.Control>
		<TagsInput.Context>
			{#snippet children(tagsInput)}
				{#each tagsInput().value as value, index (index)}
					<TagsInput.Item {value} {index}>
						<TagsInput.ItemPreview>
							<TagsInput.ItemText>{value}</TagsInput.ItemText>
							<TagsInput.ItemDeleteTrigger />
						</TagsInput.ItemPreview>
						<TagsInput.ItemInput />
					</TagsInput.Item>
				{/each}
			{/snippet}
		</TagsInput.Context>
		<TagsInput.Input placeholder="Add a flavor..." />
	</TagsInput.Control>
	<TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
	<TagsInput.HiddenInput />
</TagsInput>

Controlled

Label

Vanilla

Chocolate

Strawberry

tsx

import { TagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
			<TagsInput.Label>Label</TagsInput.Label>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview>
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger />
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

Label

Vanilla

Chocolate

Strawberry

svelte

<script lang="ts">
	import { TagsInput } from '@skeletonlabs/skeleton-svelte';
</script>

<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
	<TagsInput.Label>Label</TagsInput.Label>
	<TagsInput.Control>
		<TagsInput.Context>
			{#snippet children(tagsInput)}
				{#each tagsInput().value as value, index (index)}
					<TagsInput.Item {value} {index}>
						<TagsInput.ItemPreview>
							<TagsInput.ItemText>{value}</TagsInput.ItemText>
							<TagsInput.ItemDeleteTrigger />
						</TagsInput.ItemPreview>
						<TagsInput.ItemInput />
					</TagsInput.Item>
				{/each}
			{/snippet}
		</TagsInput.Context>
		<TagsInput.Input placeholder="Add a flavor..." />
	</TagsInput.Control>
	<TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
	<TagsInput.HiddenInput />
</TagsInput>

Custom Icon

Vanilla

Chocolate

Strawberry

tsx

import { TagsInput } from '@skeletonlabs/skeleton-react';
import { CircleXIcon } from 'lucide-react';

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview>
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger>
										<CircleXIcon className="size-4" />
									</TagsInput.ItemDeleteTrigger>
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

Vanilla

Chocolate

Strawberry

svelte

<script lang="ts">
	import { CircleXIcon } from '@lucide/svelte';
	import { TagsInput } from '@skeletonlabs/skeleton-svelte';
</script>

<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
	<TagsInput.Control>
		<TagsInput.Context>
			{#snippet children(tagsInput)}
				{#each tagsInput().value as value, index (index)}
					<TagsInput.Item {value} {index}>
						<TagsInput.ItemPreview>
							<TagsInput.ItemText>{value}</TagsInput.ItemText>
							<TagsInput.ItemDeleteTrigger>
								<CircleXIcon class="size-4" />
							</TagsInput.ItemDeleteTrigger>
						</TagsInput.ItemPreview>
						<TagsInput.ItemInput />
					</TagsInput.Item>
				{/each}
			{/snippet}
		</TagsInput.Context>
		<TagsInput.Input placeholder="Add a flavor..." />
	</TagsInput.Control>
	<TagsInput.HiddenInput />
</TagsInput>

Color

Vanilla

Chocolate

Strawberry

tsx

import { TagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview className="preset-filled-secondary-500">
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger />
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

Vanilla

Chocolate

Strawberry

svelte

<script lang="ts">
	import { TagsInput } from '@skeletonlabs/skeleton-svelte';
</script>

<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
	<TagsInput.Control>
		<TagsInput.Context>
			{#snippet children(tagsInput)}
				{#each tagsInput().value as value, index (index)}
					<TagsInput.Item {value} {index}>
						<TagsInput.ItemPreview class="preset-filled-secondary-500">
							<TagsInput.ItemText>{value}</TagsInput.ItemText>
							<TagsInput.ItemDeleteTrigger />
						</TagsInput.ItemPreview>
						<TagsInput.ItemInput />
					</TagsInput.Item>
				{/each}
			{/snippet}
		</TagsInput.Context>
		<TagsInput.Input placeholder="Add a flavor..." />
	</TagsInput.Control>
	<TagsInput.HiddenInput />
</TagsInput>

Provider Pattern

Use the Provider Pattern to gain access to the inner component APIs.

Vanilla

Chocolate

Strawberry

tsx

import { TagsInput, useTagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	const tagsInput = useTagsInput({
		defaultValue: ['Vanilla', 'Chocolate', 'Strawberry'],
	});

	return (
		<div className="w-full space-y-4">
			<TagsInput.Provider value={tagsInput}>
				<TagsInput.Control>
					<TagsInput.Context>
						{(tagsInput) =>
							tagsInput.value.map((value, index) => (
								<TagsInput.Item key={index} value={value} index={index}>
									<TagsInput.ItemPreview>
										<TagsInput.ItemText>{value}</TagsInput.ItemText>
										<TagsInput.ItemDeleteTrigger />
									</TagsInput.ItemPreview>
									<TagsInput.ItemInput />
								</TagsInput.Item>
							))
						}
					</TagsInput.Context>
					<TagsInput.Input placeholder="Add a flavor..." />
				</TagsInput.Control>
				<TagsInput.HiddenInput />
			</TagsInput.Provider>

			{/* Programmatic Controls */}
			<div className="card preset-outlined-surface-200-800 flex justify-center items-center py-4">
				<button className="btn preset-filled" onClick={() => tagsInput.clearValue()}>
					Clear Tags
				</button>
			</div>
		</div>
	);
}

Vanilla

Chocolate

Strawberry

svelte

<script lang="ts">
	import { TagsInput, useTagsInput } from '@skeletonlabs/skeleton-svelte';

	const id = $props.id();
	const tagsInput = useTagsInput({
		id,
		defaultValue: ['Vanilla', 'Chocolate', 'Strawberry'],
	});
</script>

<div class="w-full space-y-4">
	<TagsInput.Provider value={tagsInput}>
		<TagsInput.Control>
			<TagsInput.Context>
				{#snippet children(tagsInput)}
					{#each tagsInput().value as value, index (index)}
						<TagsInput.Item {value} {index}>
							<TagsInput.ItemPreview>
								<TagsInput.ItemText>{value}</TagsInput.ItemText>
								<TagsInput.ItemDeleteTrigger />
							</TagsInput.ItemPreview>
							<TagsInput.ItemInput />
						</TagsInput.Item>
					{/each}
				{/snippet}
			</TagsInput.Context>
			<TagsInput.Input placeholder="Add a flavor..." />
		</TagsInput.Control>
		<TagsInput.HiddenInput />
	</TagsInput.Provider>

	<!-- Programmatic Controls -->
	<div class="card preset-outlined-surface-200-800 flex justify-center items-center py-4">
		<button class="btn preset-filled" onclick={() => tagsInput().clearValue()}>Clear Tags</button>
	</div>
</div>

Direction

Label

Vanilla

Chocolate

Strawberry

tsx

import { TagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']} dir="rtl">
			<TagsInput.Label>Label</TagsInput.Label>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview>
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger />
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

Label

Vanilla

Chocolate

Strawberry

svelte

<script lang="ts">
	import { TagsInput } from '@skeletonlabs/skeleton-svelte';
</script>

<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']} dir="rtl">
	<TagsInput.Label>Label</TagsInput.Label>
	<TagsInput.Control>
		<TagsInput.Context>
			{#snippet children(tagsInput)}
				{#each tagsInput().value as value, index (index)}
					<TagsInput.Item {value} {index}>
						<TagsInput.ItemPreview>
							<TagsInput.ItemText>{value}</TagsInput.ItemText>
							<TagsInput.ItemDeleteTrigger />
						</TagsInput.ItemPreview>
						<TagsInput.ItemInput />
					</TagsInput.Item>
				{/each}
			{/snippet}
		</TagsInput.Context>
		<TagsInput.Input placeholder="Add a flavor..." />
	</TagsInput.Control>
	<TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
	<TagsInput.HiddenInput />
</TagsInput>

API Reference

Root

txt

w-full space-y-2

Prop	Default	Type
`ids`	—	Partial<{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item: (opts: ItemProps) => string; itemDeleteTrigger: (opts: ItemProps) => string; itemInput: (opts: ItemProps) => string; }> \| undefined The ids of the elements in the tags input. Useful for composition.
`translations`	—	IntlTranslations \| undefined Specifies the localized strings that identifies the accessibility elements and their states
`maxLength`	—	number \| undefined The max length of the input.
`delimiter`	","	string \| RegExp \| undefined The character that serves has: - event key to trigger the addition of a new tag - character used to split tags when pasting into the input
`autoFocus`	—	boolean \| undefined Whether the input should be auto-focused
`disabled`	—	boolean \| undefined Whether the tags input should be disabled
`readOnly`	—	boolean \| undefined Whether the tags input should be read-only
`invalid`	—	boolean \| undefined Whether the tags input is invalid
`required`	—	boolean \| undefined Whether the tags input is required
`editable`	true	boolean \| undefined Whether a tag can be edited after creation, by pressing `Enter` or double clicking.
`inputValue`	—	string \| undefined The controlled tag input's value
`defaultInputValue`	—	string \| undefined The initial tag input value when rendered. Use when you don't need to control the tag input value.
`value`	—	string[] \| undefined The controlled tag value
`defaultValue`	—	string[] \| undefined The initial tag value when rendered. Use when you don't need to control the tag value.
`onValueChange`	—	((details: ValueChangeDetails) => void) \| undefined Callback fired when the tag values is updated
`onInputValueChange`	—	((details: InputValueChangeDetails) => void) \| undefined Callback fired when the input value is updated
`onHighlightChange`	—	((details: HighlightChangeDetails) => void) \| undefined Callback fired when a tag is highlighted by pointer or keyboard navigation
`onValueInvalid`	—	((details: ValidityChangeDetails) => void) \| undefined Callback fired when the max tag count is reached or the `validateTag` function returns `false`
`validate`	—	((details: ValidateArgs) => boolean) \| undefined Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.
`blurBehavior`	—	"clear" \| "add" \| undefined The behavior of the tags input when the input is blurred - `"add"`: add the input value as a new tag - `"clear"`: clear the input value
`addOnPaste`	false	boolean \| undefined Whether to add a tag when you paste values into the tag input
`max`	Infinity	number \| undefined The max number of tags
`allowOverflow`	—	boolean \| undefined Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root
`name`	—	string \| undefined The name attribute for the input. Useful for form submissions
`form`	—	string \| undefined The associate form of the underlying input element.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`onPointerDownOutside`	—	((event: PointerDownOutsideEvent) => void) \| undefined Function called when the pointer is pressed down outside the component
`onFocusOutside`	—	((event: FocusOutsideEvent) => void) \| undefined Function called when the focus is moved outside the component
`onInteractOutside`	—	((event: InteractOutsideEvent) => void) \| undefined Function called when an interaction happens outside the component
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	TagsInputApi<PropTypes>
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	(tagsInput: TagsInputApi<PropTypes>) => ReactNode

Label

txt

label-text

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"label">) => Element) \| undefined Render the element yourself

Control

txt

input flex flex-wrap gap-2 p-2

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Item

Prop	Default	Type
`index`	—	string \| number
`value`	—	string
`disabled`	—	boolean \| undefined
`element`	—	((attributes: HTMLAttributes<"span">) => Element) \| undefined Render the element yourself

ItemPreview

txt

chip flex gap-0 p-0 preset-filled hover:brightness-100 w-fit data-highlighted:ring data-highlighted:ring-primary-500

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

ItemText

txt

leading-none px-2 py-1

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"span">) => Element) \| undefined Render the element yourself

ItemDeleteTrigger

txt

hover:preset-tonal px-2 py-1

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

ItemInput

txt

input text-xs

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"input">) => Element) \| undefined Render the element yourself

Input

txt

input-ghost

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"input">) => Element) \| undefined Render the element yourself

ClearTrigger

txt

btn btn-sm preset-tonal hover:preset-filled-error-500

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

HiddenInput

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"input">) => Element) \| undefined Render the element yourself

Root

txt

w-full space-y-2

Prop	Default	Type
`ids`	—	Partial<{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item: (opts: ItemProps) => string; itemDeleteTrigger: (opts: ItemProps) => string; itemInput: (opts: ItemProps) => string; }> \| undefined The ids of the elements in the tags input. Useful for composition.
`translations`	—	IntlTranslations \| undefined Specifies the localized strings that identifies the accessibility elements and their states
`maxLength`	—	number \| undefined The max length of the input.
`delimiter`	","	string \| RegExp \| undefined The character that serves has: - event key to trigger the addition of a new tag - character used to split tags when pasting into the input
`autoFocus`	—	boolean \| undefined Whether the input should be auto-focused
`disabled`	—	boolean \| undefined Whether the tags input should be disabled
`readOnly`	—	boolean \| undefined Whether the tags input should be read-only
`invalid`	—	boolean \| undefined Whether the tags input is invalid
`required`	—	boolean \| undefined Whether the tags input is required
`editable`	true	boolean \| undefined Whether a tag can be edited after creation, by pressing `Enter` or double clicking.
`inputValue`	—	string \| undefined The controlled tag input's value
`defaultInputValue`	—	string \| undefined The initial tag input value when rendered. Use when you don't need to control the tag input value.
`value`	—	string[] \| undefined The controlled tag value
`defaultValue`	—	string[] \| undefined The initial tag value when rendered. Use when you don't need to control the tag value.
`onValueChange`	—	((details: ValueChangeDetails) => void) \| undefined Callback fired when the tag values is updated
`onInputValueChange`	—	((details: InputValueChangeDetails) => void) \| undefined Callback fired when the input value is updated
`onHighlightChange`	—	((details: HighlightChangeDetails) => void) \| undefined Callback fired when a tag is highlighted by pointer or keyboard navigation
`onValueInvalid`	—	((details: ValidityChangeDetails) => void) \| undefined Callback fired when the max tag count is reached or the `validateTag` function returns `false`
`validate`	—	((details: ValidateArgs) => boolean) \| undefined Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.
`blurBehavior`	—	"clear" \| "add" \| undefined The behavior of the tags input when the input is blurred - `"add"`: add the input value as a new tag - `"clear"`: clear the input value
`addOnPaste`	false	boolean \| undefined Whether to add a tag when you paste values into the tag input
`max`	Infinity	number \| undefined The max number of tags
`allowOverflow`	—	boolean \| undefined Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root
`name`	—	string \| undefined The name attribute for the input. Useful for form submissions
`form`	—	string \| undefined The associate form of the underlying input element.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`onPointerDownOutside`	—	((event: PointerDownOutsideEvent) => void) \| undefined Function called when the pointer is pressed down outside the component
`onFocusOutside`	—	((event: FocusOutsideEvent) => void) \| undefined Function called when the focus is moved outside the component
`onInteractOutside`	—	((event: InteractOutsideEvent) => void) \| undefined Function called when an interaction happens outside the component
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	() => TagsInputApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => TagsInputApi<PropTypes>]>

Label

txt

label-text

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"label">]> \| undefined Render the element yourself

Control

txt

input flex flex-wrap gap-2 p-2

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Item

Prop	Default	Type
`index`	—	string \| number
`value`	—	string
`disabled`	—	boolean \| undefined
`element`	—	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

ItemPreview

txt

chip flex gap-0 p-0 preset-filled hover:brightness-100 w-fit data-highlighted:ring data-highlighted:ring-primary-500

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

ItemText

txt

leading-none px-2 py-1

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

ItemDeleteTrigger

txt

hover:preset-tonal px-2 py-1

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

ItemInput

txt

input text-xs

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself

Input

txt

input-ghost

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself

ClearTrigger

txt

btn btn-sm preset-tonal hover:preset-filled-error-500

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

HiddenInput

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself