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 を変更する際もラベルと可視フォーカスを保ちます。