FieldSet 字段组

一组相关表单项的容器，相当于原生的 <fieldset> + <legend>：legend 插槽是整组的标题， 也是这一组（role="group"）的可访问名。组内的项纵向排开，间距 24px；标题与第一项之间 12px。

基础用法

legend 插槽是整组的标题（role=group 的可访问名），组内用 pt-field-group 排开若干表单项。

<pt-field-set>
  <span slot="legend">收货地址</span>
  <pt-field-group>
    <pt-field>
      <span slot="label">街道</span>
      <pt-input placeholder="街道与门牌号"></pt-input>
    </pt-field>
    <pt-field>
      <span slot="label">城市</span>
      <pt-input></pt-input>
    </pt-field>
  </pt-field-group>
</pt-field-set>

整组禁用

整组禁用与标签样式

disabled 像原生 fieldset 一样禁用组内所有控件；legend-variant="label" 把标题降到与表单项标签同级。

<pt-field-set disabled legend-variant="label">
  <span slot="legend">通知方式</span>
  <pt-field orientation="horizontal">
    <pt-checkbox checked></pt-checkbox>
    <span slot="label">邮件</span>
  </pt-field>
  <pt-field orientation="horizontal">
    <pt-checkbox></pt-checkbox>
    <span slot="label">短信</span>
  </pt-field>
</pt-field-set>

disabled 与原生 <fieldset disabled> 一样禁用组内所有表单控件与按钮（kit 控件、pt-button、pt-toggle、 pt-toggle-group、pt-radio、原生 input / select / textarea / button），组内的 pt-field 也跟着变淡。 禁用期间新加入的元素同样会被禁用，与原生禁用控件一样不随表单提交、不参与校验。嵌套时外层禁用覆盖内层 （内层组的 aria-disabled 也跟上）。

组内的 kit 元素经一条独立的继承通道禁用：组写的是它们的 inherited-disabled attribute，控件的有效禁用是 自己的 disabled 与它的并集。组不改写控件自己的 disabled —— 组禁用期间照常读写、受控绑定照常生效， 读 el.disabled 得到的始终是应用自己写的值；组解禁后控件回到它自己的状态。inherited-* 由组与表单项维护， 属于内部通道，不要在应用里直接写。

组内的原生控件

原生 input / select / textarea / button 只认原生 disabled，组只能直接写它：组禁用期间它的 disabled 被应用撤掉会被补回；组解禁时只移除组自己加上的，本来就禁用着的保持不变。但组禁用期间应用再把它设为 true 是一次无变化的写入，组观测不到，组解禁时会一并移除 —— 需要原生控件在组解禁后仍禁用，就在组解禁之后再写， 或在组禁用之前写好。组内要长期单独禁用的控件，优先用 kit 控件。

为什么不直接用原生 <fieldset>：它的 disabled 只作用于 DOM 后代，管不到通过插槽投影进来的元素， 而且渲染出的 <legend> 有一套特殊排版。组件用 role="group" + aria-labelledby 表达同样的语义。

标题样式

legend-variant	标题	用途
legend	默认。16/24、中等字重	分区标题，如「收货地址」「账户信息」
label	14/20、中等字重，与表单项标签同级	一组选项的总标签，如一组复选框的题目

API

属性

属性	Attribute	类型	默认值	说明
disabled	disabled	boolean	false	禁用组内所有表单控件、按钮与 pt-field（与原生 `<fieldset disabled>` 一致，包括后加入的）。 kit 元素经继承通道禁用，组内控件自己的 `disabled` 不受影响：组禁用期间照常读写，组解禁后回到它自己的值。 组内的原生 input / select / textarea / button 例外（只能直接写它们的 `disabled`），见文档
inheritedDisabled	inherited-disabled	boolean	false	外层 pt-field-set 下发的禁用（嵌套字段组）。内部继承通道：由外层以 attribute 维护，不建议使用方直接写。 有效禁用是 `disabled` 与它的并集
legendVariant	legend-variant	"label" | "legend"	'legend'	标题样式：`legend` 16/24，作为分区标题；`label` 14/20，与表单项标签同级

插槽

名称	说明
（默认）	组内内容：pt-field、pt-field-group、pt-separator……纵向排列，间距 24
legend	标题

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

part	说明
base	role=group 的外层
content	组内内容的纵向排列容器
legend	标题