フォームと選択@neumorphism-ui/fieldset

Fieldset

関連する入力に共通の見出しと無効状態を与えるグループ。 FieldsetLegend でグループの目的を説明し、各入力のラベルも維持します。

@neumorphism-ui/fieldset

Registry JSON

プレビュー

プロフィール設定

表示名

プロフィールに表示する名前を入力してください。

インストール

npx shadcn@latest add @neumorphism-ui/fieldset

CLI が npm 依存関係、base token、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 リファレンス

アクセシビリティ