Tags Input - Skeleton

Vanilla

Chocolate

Strawberry

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

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

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

Icons

Vanilla

Chocolate

Strawberry

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', 'Strawberry']);

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

Colors

Vanilla

Chocolate

Strawberry

Vanilla

Chocolate

Strawberry

Vanilla

Chocolate

Strawberry

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

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

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

Disabled

Vanilla

Chocolate

Strawberry

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

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

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

Additional Features

Not Editable Tags

Vanilla

Chocolate

Strawberry

Add Tag on Paste

Vanilla

Chocolate

Strawberry

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

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

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

Anatomy

<TagsInput>

<div>

(unlabled)

<input>

tagList

<div>

(unlabled)

<div>

tag

<div>

(unlabled)

<span>

buttonDelete

(unlabled)

<input>

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.
`tagEditInputBase`	string	Set base classes for the edit tag input.
`tagEditInputClasses`	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.
`ids`		The ids of the elements in the tags input. Useful for composition.
`value`		The controlled tag value
`defaultValue`		The initial tag value when rendered. Use when you don't need to control the tag value.
`disabled`	boolean	Whether the tags input should be disabled
`onValueChange`		Callback fired when the tag values is updated
`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.
`name`	string	The name attribute for the input. Useful for form submissions
`translations`		Specifies the localized strings that identifies the accessibility elements and their states
`required`	boolean	Whether the tags input is required
`validate`		Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.
`invalid`	boolean	Whether the tags input is invalid
`max`	number	The max number of tags Default: Infinity
`form`	string	The associate form of the underlying input element.
`readOnly`	boolean	Whether the tags input should be read-only
`autoFocus`	boolean	Whether the input should be auto-focused
`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: ","
`editable`	boolean	Whether a tag can be edited after creation, by pressing `Enter` or double clicking. Default: true
`inputValue`	string	The controlled tag input's value
`defaultInputValue`	string	The initial tag input value when rendered. Use when you don't need to control the tag input value.
`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`
`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
`allowOverflow`	boolean	Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root
`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