Repository navigation
[TagInput] 声明 label 后内容垂直对齐不居中 #4289
Description
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
重现步骤
- 打开 TagInput 标签输入框文档页。
- 查看基础用法示例中的三行 TagInput。
- 对比第一行无
label的 TagInput，以及第二、三行声明了label="Controlled: "/label="UnControlled: "的 TagInput。 - 观察输入框内左侧 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 的垂直对齐规则不完全一致，导致视觉上不居中。
Activity
github-actions commentedon Jun 23, 2026
👋 @DaZuiZui，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。
DaZuiZui commentedon Jun 23, 2026
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:
Then open:
http://127.0.0.1:15000/react/components/tag-inputRelated demo:
packages/components/tag-input/_example/base.tsxSteps to reproduce
labeland the following TagInputs withlabel="Controlled: "/label="UnControlled: ".Expected behavior
When
labelis set, the label, tags, and input content should be visually vertically centered inside the TagInput, and should align consistently with the TagInput withoutlabel.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
labelbut without tags is not obvious.Environment
Additional context
I searched existing issues with keywords such as
TagInput label,TagInput center, andtag-input align, but did not find a duplicate.A possible cause may be the inline layout used by TagInput when
break-linemode is active and tags exist. The vertical alignment rules for.t-input__prefix,.t-tag-input__prefix, and tags may not be fully consistent.fix(tag-input): align label content vertically (#4292)