Neumorphism UI

Field

入力、ラベル、補足、検証結果を、一つの関連付けられたフィールドとして管理する場合に使います。

プレビュー

名前の入力とエラー

補足付きの制御フィールドと、必須エラーを明示したフィールドを比較します。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/field

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

名前付きの Field に FieldLabel、FieldControl、FieldDescription、FieldError を組み合わせます。入力制約または明示的な invalid 状態でエラー表示を決めます。

"use client";

import { Field, FieldControl, FieldDescription, FieldLabel } from "@/components/ui/field";

export default function Example() {
  return (
    <Field name="displayName">
      <FieldLabel>Display name</FieldLabel>
      <FieldControl defaultValue="Alex" />
      <FieldDescription>This name appears on your profile.</FieldDescription>
    </Field>
  );
}

API リファレンス

入力とラベル、説明、検証エラーを関連付ける単位。 FieldControl または render で結合した入力を使い、色と FieldError テキストでエラーを示します。

コンポーネントプロパティ型デフォルト説明
Fieldnamestring—フォーム値と外部エラーを結ぶフィールド名です。
Fieldvalidate(value) => string | string[] | null | Promise—独自の検証結果を返します。
FieldvalidationMode"onSubmit" | "onBlur" | "onChange"—検証を行うタイミングを選びます。

アクセシビリティ

  • 01

    FieldControl または render で結合した入力を使い、色と FieldError テキストでエラーを示します。

  • 02

    render や className を変更する際もラベルと可視フォーカスを保ちます。