1. framework components
  2. ›
  3. tags input

Tags Input

Allows input of multiple values.

Vanilla
Chocolate
Strawberry

TIP: Double tap each tag to quickly and easily edit in place.

Custom Icon

Implement any icon of your choosing for the remove action.

Vanilla
Chocolate
Strawberry

Color

Change the tag color using utility classes or custom CSS variables to match your design system.

Vanilla
Chocolate
Strawberry

Provider Pattern

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

Vanilla
Chocolate
Strawberry

Direction

Set the text direction ( ltr or rtl ) using the dir prop.

Vanilla
Chocolate
Strawberry

Anatomy

Here’s an overview of how the TagsInput component is structured in code:

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

export default function Anatomy() {
	return (
		<TagsInput>
			<TagsInput.Label />
			<TagsInput.Control>
				<TagsInput.Item>
					<TagsInput.ItemPreview>
						<TagsInput.ItemText />
						<TagsInput.ItemDeleteTrigger />
					</TagsInput.ItemPreview>
					<TagsInput.ItemInput />
				</TagsInput.Item>
				<TagsInput.Input />
			</TagsInput.Control>
			<TagsInput.HiddenInput />
			<TagsInput.ClearTrigger />
		</TagsInput>
	);
}

API Reference

Root

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.
allowDuplicates false boolean | undefined

Whether to allow duplicate tags.
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
sanitizeValue (value) => value.trim() ((value: string) => string) | undefined

Function to sanitize the tag value before adding. Useful for trimming whitespace, normalizing case, or stripping special characters.
name — string | undefined

The name attribute for the input. Useful for form submissions
form — string | undefined

The associate form of the underlying input element.
placeholder — string | undefined

The placeholder text for the input
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

Prop Default Type
element — ((attributes: HTMLAttributes<"label">) => Element) | undefined

Render the element yourself

Control

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

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

ItemText

Prop Default Type
element — ((attributes: HTMLAttributes<"span">) => Element) | undefined

Render the element yourself

ItemDeleteTrigger

Prop Default Type
element — ((attributes: HTMLAttributes<"button">) => Element) | undefined

Render the element yourself

ItemInput

Prop Default Type
element — ((attributes: HTMLAttributes<"input">) => Element) | undefined

Render the element yourself

Input

Prop Default Type
element — ((attributes: HTMLAttributes<"input">) => Element) | undefined

Render the element yourself

ClearTrigger

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
View page on GitHub