Tags Input 标签输入

带内联输入的标签胶囊。回车或分隔符添加标签，在空输入框中按退格删除最后一个；标签会自动换行。

基础用法

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

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

网页近似预览，真机效果以 HarmonyOS 渲染为准。

上限、分隔符与禁用

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

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

STagsInput

shadcn-vue 的 TagsInput：标签（h-5 rounded-md bg-secondary，文字 + ×）与一个行内输入框位于同一个带边框的字段中（flex flex-wrap gap-2 items-center rounded-md border px-2 py-1），并带有 v4 的焦点环。

按 Enter 或分隔符（默认为 ,）即可添加已输入的文字；输入框为空时按 Backspace 会移除最后一个标签；标签上的 × 可移除该标签。重复的标签会被忽略。标签超出宽度时会换行。

属性	类型	默认值	说明
value!!	string[] | undefined	undefined	受控的标签（配合 !! 使用）。留空则为非受控。
defaultValue	string[]	[]
placeholder	ResourceStr	''
max	number	0	标签数量上限（0 表示不限）。
delimiter	string	','
allowDuplicates	boolean	false
disabled	boolean	false
invalid	boolean	false
label	string | undefined	undefined	没有可见标签时使用的无障碍名称。

事件	类型	默认值	说明
onValueChange	(v: string[]) => void	() => { }