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을 바꿀 때 라벨 연결과 포커스 표시를 유지하세요.