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`	ReactNode	The delete button label snippet.
`stateDisabled`	string	Set the component disabled state.
`onValueChange`		Triggers when the switch is toggled.
`ids`		The ids of the elements in the tags input. Useful for composition.
`translations`		Specifies the localized strings that identifies the accessibility elements and their states
`maxLength`	number	The max length of the input.
`delimiter`	string \| RegExp	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: ","
`autoFocus`	boolean	Whether the input should be auto-focused
`disabled`	boolean	Whether the tags input should be disabled
`readOnly`	boolean	Whether the tags input should be read-only
`invalid`	boolean	Whether the tags input is invalid
`required`	boolean	Whether the tags input is required
`editable`	boolean	Whether a tag can be edited after creation, by pressing `Enter` or double clicking. Default: true
`inputValue`	string	The tag input's value
`value`		The tag values
`onInputValueChange`		Callback fired when the input value is updated
`onHighlightChange`		Callback fired when a tag is highlighted by pointer or keyboard navigation
`onValueInvalid`		Callback fired when the max tag count is reached or the `validateTag` function returns `false`
`validate`		Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.
`blurBehavior`	"clear" \| "add"	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
`max`	number	The max number of tags Default: Infinity
`allowOverflow`	boolean	Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root
`name`	string	The name attribute for the input. Useful for form submissions
`form`	string	The associate form of the underlying input element.
`dir`	"ltr" \| "rtl"	The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`onPointerDownOutside`		Function called when the pointer is pressed down outside the component
`onFocusOutside`		Function called when the focus is moved outside the component
`onInteractOutside`		Function called when an interaction happens outside the component