Neumorphism UI
表单与选择@neumorphism-ui/fieldset

Fieldset

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

@neumorphism-ui/fieldset
Registry JSON

预览

个人资料设置

输入个人资料中显示的名称。

安装

安装: fieldsetnpx shadcn@latest add @neumorphism-ui/fieldset

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置 。

用法

用法: 安装npx shadcn@latest add @neumorphism-ui/field @neumorphism-ui/fieldset

Import

Fieldset import 代码
"use client";

import * as React from "react";
import { Field, FieldLabel, FieldControl, FieldDescription, FieldError } from "@/components/ui/field";
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset";

Example

Fieldset 用法代码
export default function Example() {
  const [name, setName] = React.useState("Alex");
  const nameField = <Field name="displayName"><FieldLabel>{"显示名称"}</FieldLabel><FieldControl required value={name} onValueChange={setName} /><FieldDescription>{"输入个人资料中显示的名称。"}</FieldDescription><FieldError match="valueMissing">{"请输入名称。"}</FieldError></Field>;
  return (<Fieldset className="w-full max-w-sm"><FieldsetLegend>{"个人资料设置"}</FieldsetLegend>{nameField}</Fieldset>);
}

API 参考

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

无障碍

  • 01

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

  • 02

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