Tags Input

Tag chips with an inline input. Enter or the delimiter adds a tag, Backspace in the empty input removes the last one; chips wrap onto new lines.

Usage

@Local tags: string[] = ['Vue', 'ArkTS'];

STagsInput({ value: this.tags!!, placeholder: 'Add a framework…' })
Text(`value = ${this.tags.join(', ')}`)

Approximate web preview — the HarmonyOS rendering is the reference.

Max, delimiter & disabled

STagsInput({ defaultValue: ['one', 'two'], max: 3, placeholder: 'Max 3 tags' })
STagsInput({ delimiter: ';', placeholder: 'Separate with ;' })
STagsInput({ defaultValue: ['locked'], disabled: true })

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

STagsInput

shadcn-vue TagsInput: chips (h-5 rounded-md bg-secondary, text + x) and an inline input in one bordered field (flex flex-wrap gap-2 items-center rounded-md border px-2 py-1), with the v4 focus ring.

Enter or the delimiter (default ,) adds the typed text; Backspace in the empty input removes the last tag; the x on a chip removes it. Duplicates are ignored. Chips wrap onto new lines.

Prop	Type	Default	Description
value!!	string[] | undefined	undefined	Controlled tags (use with !!). Leave undefined for uncontrolled.
defaultValue	string[]	[]
placeholder	ResourceStr	''
max	number	0	Maximum number of tags (0 = unlimited).
delimiter	string	','
allowDuplicates	boolean	false
disabled	boolean	false
invalid	boolean	false
label	string | undefined	undefined	Accessible name when there is no visible label.

Event	Type	Default	Description
onValueChange	(v: string[]) => void	() => { }