[TagInput] 声明 label 后内容垂直对齐不居中

[DaZuiZui]

tdesign-react 版本

1.17.1

重现链接

https://tdesign.tencent.com/react/components/tag-input

也可以在本地仓库启动后访问：

pnpm run init
pnpm install
pnpm dev

打开：http://127.0.0.1:15000/react/components/tag-input

相关示例代码：packages/components/tag-input/_example/base.tsx

重现步骤

1. 打开 TagInput 标签输入框文档页。
2. 查看基础用法示例中的三行 TagInput。
3. 对比第一行无 label 的 TagInput，以及第二、三行声明了 label="Controlled: " / label="UnControlled: " 的 TagInput。
4. 观察输入框内左侧 label 与后续 tag 内容的垂直对齐效果。

期望结果

声明 label 后，输入框内的 label、tag、输入内容应当在垂直方向视觉居中，并且和未声明 label 的 TagInput 保持一致的对齐效果。

实际结果

声明左侧 label 后，输入框内的内容视觉上没有完全居中对齐。尤其是已有 tag 的场景下，label/tag/input 内容与输入框边框中心线看起来存在轻微垂直偏差。

本地测量时，在已有 tag 的 TagInput 中继续输入内容，真实 input 区域相对外层容器/tag 的中心约有 1px+ 的垂直偏移；无 tag 但有 label 的场景则不明显。

框架版本

React(18.3.1)

浏览器版本

Chrome / Chromium（本地开发浏览器复现）

系统版本

macOS(15.3.2)

Node版本

v25.8.0

补充说明

本地已搜索历史 issue，未发现 TagInput label、TagInput 居中、tag-input 对齐 等相关重复问题。

初步看起来可能和 TagInput 在 break-line 且已有 tag 时的 inline 布局有关：.t-input__prefix 与 .t-tag-input__prefix / tag 的垂直对齐规则不完全一致，导致视觉上不居中。

[github-actions]

👋 @DaZuiZui，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[DaZuiZui]

English version for reference:

tdesign-react version

1.17.1

Reproduction link

https://tdesign.tencent.com/react/components/tag-input

It can also be reproduced locally:

pnpm run init
pnpm install
pnpm dev

Then open: http://127.0.0.1:15000/react/components/tag-input

Related demo: packages/components/tag-input/_example/base.tsx

Steps to reproduce

1. Open the TagInput documentation page.
2. Check the basic usage demo.
3. Compare the first TagInput without label and the following TagInputs with label="Controlled: " / label="UnControlled: ".
4. Observe the vertical alignment of the left label and the tags inside the input.

Expected behavior

When label is set, the label, tags, and input content should be visually vertically centered inside the TagInput, and should align consistently with the TagInput without label.

Actual behavior

After declaring a left label, the content inside the input does not look fully vertically centered. The issue is especially noticeable when the TagInput already has tags.

In local measurement, when typing into a TagInput that already contains tags, the actual input area is vertically offset by a little over 1px from the center of the outer container / tags. The case with label but without tags is not obvious.

Environment

• React: 18.3.1
• Browser: Chrome / Chromium, reproduced in local development browser
• OS: macOS 15.3.2
• Node: v25.8.0

Additional context

I searched existing issues with keywords such as TagInput label, TagInput center, and tag-input align, but did not find a duplicate.

A possible cause may be the inline layout used by TagInput when break-line mode is active and tags exist. The vertical alignment rules for .t-input__prefix, .t-tag-input__prefix, and tags may not be fully consistent.