组件

Fieldset

一个 React fieldset,采用 Liquid Glass 图例,用于组织相关表单字段。

Fieldset 渲染原生 <fieldset>,提供可访问图例,并把相关字段组织在同一个标题下。每个字段仍负责自己的标签、说明与校验信息;Fieldset 只提供分组语义与间距。

当多个字段属于同一组时使用 Fieldset,例如账单信息或通知偏好。单个控件请使用 Field。已经内置标签的控件,例如 CheckboxGroup 与 RadioGroup,继续使用自己的标签,而不是从 fieldset 继承。

基础示例

通过 children 传入字段。legend 为整组命名,并通过 aria-labelledby 与原生 <fieldset> 关联。

Billing details

Shown on invoices and receipts.

禁用

disabled 会透传给原生 <fieldset>、Base UI 的 fieldset 上下文,以及包内嵌套的表单控件。字段与控件会一起禁用,图例也会淡出。

Billing details

Shown on invoices and receipts.

无障碍

Fieldset 渲染原生 <fieldset>,并通过 aria-labelledby 关联 legend。每个嵌套的 Field 仍提供控件自己的标签与说明,键盘行为由组内控件负责。

需要标题时应始终渲染可见的 legend。如果设计上确实不需要可见标题,请为 fieldset 传入 aria-label,确保分组仍有可访问名称。表单模式见可访问性指南。

API 参考

Fieldset

属性类型默认值说明
childrenReactNode—由 fieldset 分组的字段与控件。必填。
legendReactNode—为分组命名的可见图例。
disabledbooleanfalse禁用原生 fieldset 与内部字段及表单控件。
classNamestring—合并到 fieldset 根元素的 Tailwind 类名。
styleCSSProperties—内联样式,合并到与 className 相同的元素。
ui{ root?: ClassValue; legend?: ClassValue }—按 data-slot 组织的内部槽位类名。
renderReactElement | ((props, state) => ReactElement)—替换 fieldset 根元素。

其余 Base UI Fieldset.Root 属性会透传,包括 id 与原生 fieldset 属性。

属性说明
data-disabledfieldset 禁用时存在。
data-slot标记内部结构(root、legend)以便样式覆盖。

主题

Fieldset 本身没有玻璃表面;它会重置原生 fieldset 的边框、外边距与内边距,并继承页面材质。可以通过共享的 --ui-drop-shadow-label token 调整图例投影,用 className 控制布局,并通过 ui 按 data-slot 覆盖 root 与 legend 槽位。组件级数值位于 src/theme/fieldset.ts。Token 分层与预设见主题指南。

相关组件

  • Field — 为单个控件添加标签、说明与校验信息。
  • Input — 放入字段的标准文本输入框。
  • Checkbox Group — 使用自身标签的分组控件。