Tags Input - Skeleton

Vanilla

Chocolate

Stawberry

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

export const Page: React.FC = () => {
	const [flavors, setFlavors] = useState(['Vanilla', 'Chocolate', 'Stawberry']);

	return <TagsInput name="example" value={flavors} onValueChange={setFlavors} placeholder="Add Tag..." />;
};

Icons

Vanilla

Chocolate

Stawberry

import { useState } from 'react';
import { TagsInput } from '@skeletonlabs/skeleton-react';
import { XCircle as IconDelete } from 'lucide-react';

export const Page: React.FC = () => {
	const [flavors, setFlavors] = useState(['Vanilla', 'Chocolate', 'Stawberry']);

	return <TagsInput value={flavors} onValueChange={setFlavors} placeholder="Add Tag..." buttonDelete={<IconDelete className="size-4" />} />;
};

Colors

Vanilla

Chocolate

Stawberry

Vanilla

Chocolate

Stawberry

Vanilla

Chocolate

Stawberry

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

export const Page: React.FC = () => {
	const [flavors, setFlavors] = useState(['Vanilla', 'Chocolate', 'Stawberry']);

	return (
		<section className="w-full space-y-4">
			<TagsInput value={flavors} onValueChange={setFlavors} placeholder="Add Tag..." tagBackground="preset-filled-primary-500" />
			<TagsInput value={flavors} onValueChange={setFlavors} placeholder="Add Tag..." tagBackground="preset-filled-secondary-500" />
			<TagsInput value={flavors} onValueChange={setFlavors} placeholder="Add Tag..." tagBackground="preset-filled-tertiary-500" />
		</section>
	);
};

Disabled

Vanilla

Chocolate

Stawberry

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

export const Page: React.FC = () => {
	const [flavors, setFlavors] = useState(['Vanilla', 'Chocolate', 'Stawberry']);

	return <TagsInput name="example" value={flavors} onValueChange={setFlavors} placeholder="Add Tag..." disabled />;
};

Additional Features

Not Editable Tags

Vanilla

Chocolate

Stawberry

Add Tag on Paste

Vanilla

Chocolate

Stawberry

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

export const Page: React.FC = () => {
	const [flavors, setFlavors] = useState(['Vanilla', 'Chocolate', 'Stawberry']);

	return (
		<section className="w-full space-y-4">
			<p>Not Editable Tags</p>
			<TagsInput value={flavors} onValueChange={setFlavors} placeholder="Add Tag..." editable={false} />
			<p>Add Tag on Paste</p>
			<TagsInput value={flavors} onValueChange={setFlavors} placeholder="Add Tag..." addOnPaste />
		</section>
	);
};

API Reference

TagsInput

Property	Type	Description
`placeholder`	string	Set the add tag input placeholder.
`base`	string	Set base classes for the root.
`gap`	string	Set gap classes for the root.
`padding`	string	Set padding classes for the root.
`classes`	string	Provide arbitrary classes to the root.
`inputBase`	string	Set base classes for the add tag input.
`inputClasses`	string	Provide arbitrary classes to the add tag input.
`tagListBase`	string	Set base classes for the tag list.
`tagListClasses`	string	Provide arbitrary classes to the tag list.
`tagBase`	string	Set base classes for each tag.
`tagBackground`	string	Set background classes for each tag.
`tagClasses`	string	Provide arbitrary classes to each tag.
`inputEditBase`	string	Set base classes for the edit tag input.
`tagEditBackground`	string	Set background classes for the edit tag input.
`inputEditClasses`	string	Provide arbitrary classes to the edit tag input.
`buttonDeleteBase`	string	Set base classes for the delete button.
`buttonDeleteClasses`	string	Provide arbitrary classes to the delete button.
`buttonDelete`	React.ReactNode	The delete button label snippet.
`onValueChange`	object	Triggers when the switch is toggled.
`max`	number	The max number of tags Default: Infinity
`required`	boolean	Whether the tags input is required
`name`	string	The name attribute for the input. Useful for form submissions
`value`	array	The tag values
`form`	string	The associate form of the underlying input element.
`dir`	string	The document's text/writing direction. Default: ltr
`invalid`	boolean	Whether the tags input is invalid
`getRootNode`	object	A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`disabled`	boolean	Whether the tags input should be disabled
`maxLength`	number	The max length of the input.
`readOnly`	boolean	Whether the tags input should be read-only
`autoFocus`	boolean	Whether the input should be auto-focused
`ids`	Partial<...>	The ids of the elements in the tags input. Useful for composition.
`translations`	IntlTranslations	Specifies the localized strings that identifies the accessibility elements and their states
`delimiter`	(unknown)	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 Default: ,
`editable`	boolean	Whether a tag can be edited after creation, by presing `Enter` or double clicking. Default: true
`inputValue`	string	The tag input's value
`onInputValueChange`	object	Callback fired when the input value is updated
`onHighlightChange`	object	Callback fired when a tag is highlighted by pointer or keyboard navigation
`onValueInvalid`	object	Callback fired when the max tag count is reached or the `validateTag` function returns `false`
`validate`	object	Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.
`blurBehavior`	string	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`	boolean	Whether to add a tag when you paste values into the tag input Default: false
`allowOverflow`	boolean	Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root
`onPointerDownOutside`	object	Function called when the pointer is pressed down outside the component
`onFocusOutside`	object	Function called when the focus is moved outside the component
`onInteractOutside`	object	Function called when an interaction happens outside the component