输入与表单Inputs · 13 / 64

TagsInput

ui.widgets.TagsInput

用键盘连续录入多个 token。Enter many tokens from the keyboard.

BEHAVIOR CONTRACT

逗号 / 回车提交、删除、焦点和 tag 列表更新都落在字素安全边界。Comma / Enter commit, delete, focus and list updates all land on grapheme-safe boundaries.

RECORDED INTERACTION

Harness 输入 “docs,” 提交为新 tag。The harness types “docs,” and it commits as a new tag.

examples/storybook/stories.zig:3042

// ── TagsInput ──
pub fn buildTagsInput(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 12);
    const ti = try ui.widgets.TagsInput(.{
        .initial_tags = &.{ "zig", "metal" },
        .width = 380,
    }, scope, cx);
    ti.input.meta.ownership.meta.test_id = "story.tags.input";
    ti.wrapper.meta.ownership.meta.test_id = "story.tags.wrapper";
    try c.appendChild(a, ti.wrapper);
    try c.appendChild(a, try label(cx, "End with comma (or click Add) to commit a tag."));
    return c;
}

在 GitHub 查看源码View source on GitHubexamples/storybook/stories.zig:3042

这是 Storybook 中该 story 的原样代码（zenit 5f9add5+wip 2026-09-30）。其中 W 即 ui.widgets，col / row / label 是 Storybook 内的布局小工具。The story's verbatim source from the Storybook (zenit 5f9add5+wip 2026-09-30). W is ui.widgets; col / row / label are small Storybook layout helpers.

← PREV

ComboBoxComboBox

FileUploadFileUpload