Neumorphism UI
フォームと選択@neumorphism-ui/field

Field

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

@neumorphism-ui/field
Registry JSON

プレビュー

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

名前を入力してください。

インストール

インストール: fieldnpx shadcn@latest add @neumorphism-ui/field

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定 を完了してください。

使い方

Import

Field の import コード
"use client";

import * as React from "react";
import { Field, FieldLabel, FieldControl, FieldDescription, FieldError } from "@/components/ui/field";

Example

Field の使用コード
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 (<div className="grid w-full max-w-sm gap-5">{nameField}<Field invalid><FieldLabel>{"表示名"}</FieldLabel><FieldControl defaultValue="" /><FieldError match>{"名前を入力してください。"}</FieldError></Field></div>);
}

API リファレンス

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

アクセシビリティ

  • 01

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

  • 02

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