TagInput

<ts-tag-input> vv0.6.3

The ts-tag-input component.

Open in Storybook for interactive demos.

Preview

<ts-tag-input size="md" value="[]"></ts-tag-input>

Property	Attribute	Type	Default	Description
`allowDuplicates`	`allow-duplicates`	`boolean`	`false`	Whether to allow duplicate tags.
`disabled`	`disabled`	`boolean`	`false`	Renders the input as disabled.
`error`	`error`	`string \| undefined`	—	Error message — renders the input in an error state.
`helpText`	`help-text`	`string \| undefined`	—	Help text displayed below the input.
`label`	`label`	`string`	—	Label text displayed above the input.
`maxTags`	`max-tags`	`number \| undefined`	—	Maximum number of tags allowed.
`placeholder`	`placeholder`	`string \| undefined`	—	Placeholder text for the input.
`size`	`size`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`	The input’s size.
`value`	—	`string[]`	`[]`	The current list of tags.

Event	Detail	Bubbles	Composed	Description
`tsChange`	`\{ value: string[]; \}`	Yes	Yes	Emitted when the tag list changes.
`tsInput`	`\{ inputValue: string; \}`	Yes	Yes	Emitted on each keystroke in the input.

Use ::part() to style internal elements:

Part	Description
`base`	The outer wrapper containing tags and input.
`error-text`	The error message wrapper.
`help-text`	The help text wrapper.
`input`	The native text input.
`label`	The label element.
`tag`	A tag chip element.
`tag-remove`	The remove button inside a tag.

ts-tag-input::part(base) {
  /* your custom styles */
}

<ts-tag-input size="md" value="[]"></ts-tag-input>

import { TsTagInput } from '@tessera-ui/react';

<TsTagInput size="md" value="[]"></TsTagInput>