字段集是一个具有内容切换功能的分组组件。
import { Fieldset } from 'primereact/fieldset';
一个简单的字段集可以通过 legend 属性以及作为子项的内容来创建。
<Fieldset legend="Header">
<p className="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Fieldset>
当启用 toggleable 选项时，可以展开和折叠字段集的内容。可切换的字段集可以用作受控或非受控组件。在受控模式下，需要绑定 collapsed 属性以及 onToggle 事件来管理内容状态。
<Fieldset legend="Header" toggleable>
<p className="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Fieldset>
可以使用自定义内容而不是原始值来定义图例部分。
<Fieldset legend={legendTemplate}>
<p className="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Fieldset>
字段集组件使用语义化的 fieldset 元素。当启用 toggleable 选项时，legend 元素内会包含一个带有 button 角色的可点击元素，该按钮具有 aria-controls 来定义内容部分的 ID，以及 aria-expanded 来表示可见性状态。读取按钮的值默认为 legend 属性的值，并且可以通过 toggleButtonProps 属性定义 aria-label 或 aria-labelledby 来进行自定义。
内容使用 region，定义一个与内容切换按钮的 aria-controls 匹配的 ID，以及引用标题 ID 的 aria-labelledby。
| 按键 | 功能 |
|---|---|
| tab | 将焦点移动到页面 tab 顺序中的下一个可聚焦元素。 |
| shift + tab | 将焦点移动到页面 tab 顺序中的上一个可聚焦元素。 |
| enter | 切换内容的可见性。 |
| space | 切换内容的可见性。 |