Neumorphism UI

Fieldset

用于为一组相关表单字段提供共同的可见组名。

预览

个人资料设置分组

在个人资料组标题下放置带帮助与验证信息的必填姓名字段。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/fieldset

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

个人资料设置分组

npx shadcn@latest add @neumorphism-ui/field @neumorphism-ui/fieldset
Registry JSON

用法

先放置 FieldsetLegend，再组合各个 Field。即使组已有标题，每个字段也仍需自己的标签。

"use client";

import { Field, FieldControl, FieldLabel } from "@/components/ui/field";
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset";

export default function Example() {
  return (
    <Fieldset>
      <FieldsetLegend>Profile settings</FieldsetLegend>
      <Field name="displayName">
        <FieldLabel>Display name</FieldLabel>
        <FieldControl defaultValue="Alex" />
      </Field>
    </Fieldset>
  );
}

API 参考

为相关控件提供共用标题和禁用状态的组。 用 FieldsetLegend 说明组的用途，同时保留各控件的标签。

组件属性类型默认值说明
Fieldsetdisabledboolean—禁用用户操作。
FieldsetLegendchildrenReact.ReactNode—为相关字段组命名。
FieldsetclassNamestring | function—扩展样式，也可使用状态回调。

无障碍

  • 01

    用 FieldsetLegend 说明组的用途，同时保留各控件的标签。

  • 02

    修改 render 或 className 时保留标签关联和可见焦点。