Skip to content
Lenso UI

Fieldset 字段组

将相关表单控件与图例、描述和操作组合在一起

用法

import { Fieldset } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6, Apache-2.0.import { FloppyDisk } from "@gravity-ui/icons";import {  Button,  Description,  FieldError,  FieldGroup,  Fieldset,  Form,  Input,  Label,  TextArea,  TextField,} from "@lenso/ui";import { useId, type FormEvent } from "react";import { demoStyles } from "../../demo.stylex";
export function Basic() {  const descriptionId = useId();  function onSubmit(event: FormEvent<HTMLFormElement>) {    event.preventDefault();    alert("Form submitted successfully!");  }  return (    <Form xstyle={demoStyles.wideColumn} onSubmit={onSubmit}>      <Fieldset aria-describedby={descriptionId}>        <Fieldset.Legend>Profile Settings</Fieldset.Legend>        <Description id={descriptionId}>Update your profile information.</Description>        <FieldGroup>          <TextField            name="name"            validate={(value) =>              String(value).length < 3 ? "Name must be at least 3 characters" : null            }          >            <Label required>Name</Label>            <Input required placeholder="John Doe" />            <FieldError />          </TextField>          <TextField name="email">            <Label required>Email</Label>            <Input required type="email" placeholder="[email protected]" />            <FieldError />          </TextField>          <TextField            name="bio"            validate={(value) =>              String(value).length < 10 ? "Bio must be at least 10 characters" : null            }          >            <Label required>Bio</Label>            <TextArea required placeholder="Tell us about yourself..." />            <Description>Minimum 10 characters</Description>            <FieldError />          </TextField>        </FieldGroup>        <Fieldset.Actions>          <Button type="submit">            <FloppyDisk aria-hidden="true" />            Save changes          </Button>          <Button type="reset" variant="secondary">            Cancel          </Button>        </Fieldset.Actions>      </Fieldset>    </Form>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

组件结构

import { Fieldset } from '@lenso/ui';
export default () => (  <Fieldset>    <Fieldset.Legend />    <Fieldset.Group>      {/* form fields go here */}    </Fieldset.Group>    <Fieldset.Actions>      {/* action buttons go here */}    </Fieldset.Actions>  </Fieldset>)

示例

表面样式

在 Surface 内使用时，请在表单控件（Input、TextArea 等）上使用 variant="secondary"，以应用适合 Surface 背景的低强调变体。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.import { FloppyDisk } from "@gravity-ui/icons";import {  Button,  Description,  FieldError,  Fieldset,  Form,  Input,  Label,  Surface,  TextArea,  TextField,} from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { useId } from "react";
const styles = stylex.create({  backdrop: {    display: "flex",    alignItems: "center",    justifyContent: "center",    borderRadius: 24,    backgroundColor: "var(--surface)",    padding: 24,  },  surface: { width: "100%", minWidth: 380 },  fieldset: { width: "100%" },});
export function OnSurface() {  const descriptionId = useId();  return (    <div {...stylex.props(styles.backdrop)}>      <Surface xstyle={styles.surface}>        <Form          onSubmit={(event) => {            event.preventDefault();            alert("Form submitted successfully!");          }}        >          <Fieldset xstyle={styles.fieldset} aria-describedby={descriptionId}>            <Fieldset.Legend>Profile Settings</Fieldset.Legend>            <Description id={descriptionId}>Update your profile information.</Description>            <Fieldset.Group>              <TextField                name="name"                validate={(value) =>                  String(value).length < 3 ? "Name must be at least 3 characters" : null                }              >                <Label required>Name</Label>                <Input required placeholder="John Doe" variant="secondary" />                <FieldError />              </TextField>              <TextField name="email">                <Label required>Email</Label>                <Input required type="email" placeholder="[email protected]" variant="secondary" />                <FieldError />              </TextField>              <TextField                name="bio"                validate={(value) =>                  String(value).length < 10 ? "Bio must be at least 10 characters" : null                }              >                <Label required>Bio</Label>                <TextArea required placeholder="Tell us about yourself..." variant="secondary" />                <Description>Minimum 10 characters</Description>                <FieldError />              </TextField>            </Fieldset.Group>            <Fieldset.Actions>              <Button type="submit">                <FloppyDisk aria-hidden="true" />                Save changes              </Button>              <Button type="reset" variant="tertiary">                Cancel              </Button>            </Fieldset.Actions>          </Fieldset>        </Form>      </Surface>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.import { FloppyDisk } from "@gravity-ui/icons";import {  Button,  Description,  FieldError,  FieldGroup,  Fieldset,  Form,  Input,  Label,  TextArea,  TextField,} from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { useId } from "react";
const styles = stylex.create({  form: { width: "100%", maxWidth: 384 },  shell: {    borderRadius: 12,    borderWidth: 1,    borderStyle: "solid",    borderColor: "color-mix(in oklch, var(--border) 70%, transparent)",    backgroundImage: {      default: "linear-gradient(to bottom, oklch(0.985 0 0 / 0.9), white)",      ":is([data-theme='dark'] *)":        "linear-gradient(to bottom, oklch(0.205 0 0 / 0.8), oklch(0.205 0 0))",    },    padding: 16,    boxShadow: {      default: "0 0 0 1px rgb(0 0 0 / 0.05)",      ":is([data-theme='dark'] *)": "0 0 0 1px rgb(255 255 255 / 0.1)",    },  },  legend: {    fontWeight: 500,    color: { default: "oklch(0.269 0 0)", ":is([data-theme='dark'] *)": "oklch(0.97 0 0)" },  },  description: {    color: { default: "oklch(0.439 0 0)", ":is([data-theme='dark'] *)": "oklch(0.708 0 0)" },  },  field: {    borderRadius: 12,    borderWidth: 1,    borderStyle: "solid",    borderColor: "color-mix(in oklch, var(--border) 80%, transparent)",    backgroundColor: "var(--surface)",    boxShadow: {      default: "0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px rgb(0 0 0 / 0.05)",      ":focus-visible": "0 0 0 2px oklch(0.708 0 0 / 0.25), 0 1px 2px rgb(0 0 0 / 0.05)",      ":is([data-theme='dark'] *)": {        default: "0 0 0 1px rgb(255 255 255 / 0.1), 0 1px 2px rgb(0 0 0 / 0.05)",        ":focus-visible": "0 0 0 2px oklch(0.556 0 0 / 0.3), 0 1px 2px rgb(0 0 0 / 0.05)",      },    },    transitionProperty: "box-shadow, border-color",    transitionDuration: { default: "150ms", "@media (prefers-reduced-motion: reduce)": "0ms" },  },});
export function CustomStyles() {  const descriptionId = useId();  return (    <Form      xstyle={styles.form}      onSubmit={(event) => {        event.preventDefault();        alert("Form submitted successfully!");      }}    >      <Fieldset xstyle={styles.shell} aria-describedby={descriptionId}>        <Fieldset.Legend xstyle={styles.legend}>Profile Settings</Fieldset.Legend>        <Description id={descriptionId} xstyle={styles.description}>          Update your profile information.        </Description>        <FieldGroup>          <TextField            name="name"            validate={(value) =>              String(value).length < 3 ? "Name must be at least 3 characters" : null            }          >            <Label required>Name</Label>            <Input required xstyle={styles.field} placeholder="John Doe" />            <FieldError />          </TextField>          <TextField name="email">            <Label required>Email</Label>            <Input required type="email" xstyle={styles.field} placeholder="[email protected]" />            <FieldError />          </TextField>          <TextField            name="bio"            validate={(value) =>              String(value).length < 10 ? "Bio must be at least 10 characters" : null            }          >            <Label required>Bio</Label>            <TextArea required xstyle={styles.field} placeholder="Tell us about yourself..." />            <Description>Minimum 10 characters</Description>            <FieldError />          </TextField>        </FieldGroup>        <Fieldset.Actions>          <Button type="submit">            <FloppyDisk aria-hidden="true" />            Save changes          </Button>          <Button type="reset" variant="secondary">            Cancel          </Button>        </Fieldset.Actions>      </Fieldset>    </Form>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

使用 @layer components 指令定位 Fieldset 的 BEM 风格类。

@layer components {  .fieldset {    @apply gap-5 rounded-xl border border-border/60 bg-surface p-6 shadow-field;  }
  .fieldset__legend {    @apply text-lg font-semibold;  }
  .fieldset__field-group {    @apply gap-3 md:grid md:grid-cols-2;  }
  .fieldset__actions {    @apply flex justify-end gap-2 pt-2;  }}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

Fieldset 复合组件暴露以下 CSS 选择器：

基础类 [!toc]

  • .fieldset – 根容器
  • .fieldset__legend – 图例元素
  • .fieldset__field-group – 分组字段包裹层
  • .fieldset__actions – 字段下方的操作栏

API 参考

Fieldset

Prop类型默认值描述
classNamestring-应用于根元素的 Tailwind CSS 类
childrenReact.ReactNode-Fieldset 内容（图例、分组、描述、操作）
nativePropsReact.HTMLAttributes<HTMLFieldSetElement>支持原生 fieldset 属性与事件

Fieldset.Legend

Prop类型默认值描述
classNamestring-图例元素的 Tailwind 类
childrenReact.ReactNode-图例内容，通常为纯文本
nativePropsReact.HTMLAttributes<HTMLLegendElement>-原生 legend 属性

Fieldset.Group

Prop类型默认值描述
classNamestring-分组字段的布局与间距类
childrenReact.ReactNode-fieldset 内要分组的表单控件
nativePropsReact.HTMLAttributes<HTMLDivElement>-原生 div 属性

Fieldset.Actions

Prop类型默认值描述
classNamestring-对齐操作按钮或文本的 Tailwind 类
childrenReact.ReactNode-操作按钮或辅助文本
nativePropsReact.HTMLAttributes<HTMLDivElement>-原生 div 属性

相关案例

See upstream Fieldset showcases. Product showcases are not part of the local component runtime.

相关组件

TextField 文本输入框

便于组合的文本字段，包含标签、说明与内联校验。

Label 标签

渲染与表单控件关联的无障碍标签。

CheckboxGroup 复选框组

用于管理多个复选框选择的复选框组组件