폼과 선택@neumorphism-ui/fieldset

Fieldset

관련 입력에 공통 제목과 비활성 상태를 제공하는 그룹. FieldsetLegend로 그룹의 목적을 설명하고 개별 입력에도 라벨을 남겨 두세요.

@neumorphism-ui/fieldset

Registry JSON

미리보기

프로필 설정

표시 이름

프로필에 표시할 이름을 입력하세요.

설치

npx shadcn@latest add @neumorphism-ui/fieldset

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

npx shadcn@latest add @neumorphism-ui/field @neumorphism-ui/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

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 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Fieldset`	`disabled`	`boolean`	`—`	사용자 조작을 비활성화합니다.
`FieldsetLegend`	`children`	`React.ReactNode`	`—`	관련 필드 그룹의 제목입니다.
`Fieldset`	`className`	`string \| function`	`—`	기본 스타일을 확장하며 상태 함수도 지원합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성