InputGroup 输入组

基础用法

前缀、后缀放进 start / end 插槽：文字 14/20 弱色，图标 16px。点在前后缀或外框留白上同样聚焦输入框。

<pt-input-group>
  <span slot="start">https://</span>
  <pt-input placeholder="example" aria-label="域名"></pt-input>
  <span slot="end">.com</span>
</pt-input-group>
<pt-input-group>
  <svg slot="start" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <circle cx="11" cy="11" r="8"></circle>
    <path d="m21 21-4.3-4.3"></path>
  </svg>
  <pt-input placeholder="搜索报表" aria-label="搜索报表"></pt-input>
  <span slot="end">12 条结果</span>
</pt-input-group>

把输入框与前后的图标、文字、按钮拼成一个描边框：网址前缀「https://」、金额单位「¥」、搜索框的放大镜、 末尾的「复制」「发送」按钮。默认插槽放一个 pt-input（或 pt-textarea），前后缀放进 start / end 插槽。

描边、圆角、悬停色、焦点环、出错色、禁用淡化都由输入组画在外框上；里面的 pt-input 通过它开放的 CSS 变量 （--pt-input-border-width: 0、--pt-input-padding-inline: 0、--pt-input-focus-ring: none）去掉自己的那一套， 输入组会自动设好，不用手写。

带按钮

带按钮

末尾的按钮用 pt-button size="sm" variant="ghost"，放进 end 插槽。

<pt-input-group>
  <pt-input value="https://ptengine.com/r/8a3f" readonly aria-label="分享链接"></pt-input>
  <pt-button slot="end" size="sm" variant="ghost">复制</pt-button>
</pt-input-group>
<pt-input-group>
  <pt-input type="search" placeholder="搜索（Esc 清空）" aria-label="搜索"></pt-input>
  <pt-button slot="end" size="sm" variant="ghost">搜索</pt-button>
</pt-input-group>

末尾的按钮用 <pt-button slot="end" size="sm" variant="ghost">（对应源包的 InputGroupButton）。 pt-input type="search" 放进来照常有内置的放大镜、role="searchbox" 与 Esc 清空。

焦点环只在焦点落在输入框里时出现；Tab 到末尾按钮时是按钮自己的焦点环。

多行

多行

默认插槽放 pt-textarea 时高度随内容，前后缀贴顶、与第一行文字对齐。

<pt-input-group>
  <pt-textarea placeholder="说点什么…" aria-label="留言" rows="3"></pt-textarea>
  <pt-button slot="end" size="sm" variant="ghost">发送</pt-button>
</pt-input-group>

默认插槽放 pt-textarea 时输入组进入多行形态（宿主标 data-multiline）：高度随内容，前后缀贴顶。 里面的 pt-textarea 同样由 --pt-textarea-border-width / --pt-textarea-padding-inline / --pt-textarea-focus-ring 去掉自己的描边。

尺寸与状态

尺寸与状态

size 同时写到里面的 pt-input 上。invalid / disabled 写在 pt-input 上（外层 fieldset 禁用也算），输入组读它来画外框。

<pt-input-group size="sm">
  <span slot="start">¥</span>
  <pt-input placeholder="小号" aria-label="小号"></pt-input>
</pt-input-group>
<pt-input-group size="lg">
  <span slot="start">¥</span>
  <pt-input placeholder="大号" aria-label="大号"></pt-input>
</pt-input-group>
<pt-input-group>
  <span slot="start">@</span>
  <pt-input value="not an email" invalid aria-label="邮箱"></pt-input>
</pt-input-group>
<pt-input-group>
  <span slot="start">@</span>
  <pt-input value="ptengine" disabled aria-label="用户名"></pt-input>
</pt-input-group>

• size 由输入组下发：写成里面 pt-input 的 size，两者始终同档（里面自己写的 size 会被覆盖）。 pt-textarea 没有尺寸档，多行时不写。
• invalid / disabled 以里面的控件为准：写在 pt-input / pt-textarea 上，外层 <fieldset disabled> 与 pt-field / pt-field-set 经继承通道下发的也一样生效。输入组读控件的有效状态，反射成宿主上的 data-invalid / data-disabled 来画外框 —— 同一个状态只有一处来源，不会出现「组看起来禁用了、里面还能输入」。
• 禁用时外框与前后缀淡化到 .5（里面的控件自己也是 .5，不会叠成 .25）。

点击与触屏

点在前后缀的文字、图标，或外框的留白上，都会聚焦输入框（且不会让已聚焦的输入框先失焦再聚焦）； 点在按钮、链接等可交互元素上时不插手。粗指针（触屏）下命中区上下扩到至少 44px，视觉高度不变， 扩出去的部分同样聚焦输入框。

无障碍

• 宿主默认 role="group"；自己写了 role 时不覆盖。
• 输入框的名字照常写在 pt-input 上（aria-label 或用 pt-label / pt-field 关联），前后缀文字只是视觉提示， 不会自动并进输入框的名字 —— 「¥」「.com」这类信息对读屏重要时，把它写进标签或说明里。

API

属性

属性	Attribute	类型	默认值	说明
size	size	"lg" | "md" | "sm"	'md'	尺寸档位（高 24 / 32 / 40），同时写到子 `pt-input` 的 `size` 上。多行（pt-textarea）时高度随内容

插槽

名称	说明
（默认）	一个 `pt-input` 或 `pt-textarea`
end	输入区后的图标、文字、按钮（源包 InputGroupAddon align="inline-end" / InputGroupButton）
start	输入区前的图标、文字（源包 InputGroupAddon align="inline-start" / InputGroupText）

可定制的内部元素（::part()）

part	说明
base	外框（描边、圆角、焦点环都画在它上面）

CSS 变量

变量	说明
--pt-input-group-radius	圆角，默认取控件档位（md / lg 为 --pt-radius-md，sm 为 --pt-radius-sm）