一个 React fieldset,采用 Liquid Glass 图例,用于组织相关表单字段。
Fieldset 渲染原生 <fieldset>,提供可访问图例,并把相关字段组织在同一个标题下。每个字段仍负责自己的标签、说明与校验信息;Fieldset 只提供分组语义与间距。
当多个字段属于同一组时使用 Fieldset,例如账单信息或通知偏好。单个控件请使用 Field。已经内置标签的控件,例如 CheckboxGroup 与 RadioGroup,继续使用自己的标签,而不是从 fieldset 继承。
通过 children 传入字段。legend 为整组命名,并通过 aria-labelledby 与原生 <fieldset> 关联。
disabled 会透传给原生 <fieldset>、Base UI 的 fieldset 上下文,以及包内嵌套的表单控件。字段与控件会一起禁用,图例也会淡出。
Fieldset 渲染原生 <fieldset>,并通过 aria-labelledby 关联 legend。每个嵌套的 Field 仍提供控件自己的标签与说明,键盘行为由组内控件负责。
需要标题时应始终渲染可见的 legend。如果设计上确实不需要可见标题,请为 fieldset 传入 aria-label,确保分组仍有可访问名称。表单模式见可访问性指南。
Fieldset
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
children | ReactNode | — | 由 fieldset 分组的字段与控件。必填。 |
legend | ReactNode | — | 为分组命名的可见图例。 |
disabled | boolean | false | 禁用原生 fieldset 与内部字段及表单控件。 |
className | string | — | 合并到 fieldset 根元素的 Tailwind 类名。 |
style | CSSProperties | — | 内联样式,合并到与 className 相同的元素。 |
ui | { root?: ClassValue; legend?: ClassValue } | — | 按 data-slot 组织的内部槽位类名。 |
render | ReactElement | ((props, state) => ReactElement) | — | 替换 fieldset 根元素。 |
其余 Base UI Fieldset.Root 属性会透传,包括 id 与原生 fieldset 属性。
| 属性 | 说明 |
|---|---|
data-disabled | fieldset 禁用时存在。 |
data-slot | 标记内部结构(root、legend)以便样式覆盖。 |
Fieldset 本身没有玻璃表面;它会重置原生 fieldset 的边框、外边距与内边距,并继承页面材质。可以通过共享的 --ui-drop-shadow-label token 调整图例投影,用 className 控制布局,并通过 ui 按 data-slot 覆盖 root 与 legend 槽位。组件级数值位于 src/theme/fieldset.ts。Token 分层与预设见主题指南。