Field
ラベル、コントロール、説明、ネイティブ妥当性、エラーを組み合わせるアクセシブルな構成です。
主なプロパティ
TRField は Base UI Field の全構造をラップします。Label、Description、表示中の Error はコントロールに自動的に関連付けられます。Root の name と disabled は Control の同名プロパティより優先されます。
| パーツ | 責務 |
|---|---|
Root | 名前、利用可否、検証タイミング、dirty・touched・filled・focused の状態 |
Label | アクセシブルな名前と、クリックでフォーカスする対象 |
Control | ネイティブ入力の値、イベント、妥当性、フォームデータ、リセット |
Description | aria-describedby に含まれる常時表示の説明 |
Error | ネイティブの妥当性または外部の状態に応じた復旧メッセージ |
Validity | 値、エラー、ネイティブの ValidityState を読み取るレンダープロップ |
Item | コレクション内のチェックボックス・ラジオとラベル・説明の配置 |
値をフォーカス可能なまま送信する場合は Control の readOnly、操作不可かつフォームデータから除外する場合は Root の disabled を使います。標準的なパーツの組み合わせでは、aria-labelledby と aria-describedby を手動で設定する必要はありません。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/field.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRField } from '@tinyrack/ui/components/field';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
プレビュー内で入力すると、操作対象の値が変わります。プレイグラウンドのコントロールでは required、invalid、read-only、disabled、size を切り替えられ、リセットするとコントロールとプレビューの値が初期値に戻ります。
使用方法
例
サイズ パーマリンク
周囲のコントロールとコンテンツの密度に合うサイズを選びます。
利用可否と有効性の状態 パーマリンク
回復案内には invalid、フォームデータから値を除外する場合は disabled、フォーカスと送信値を保つ場合は readOnly を使います。
送信、復旧、リセット パーマリンク
メールのネイティブな妥当性に対応するエラーを選び、リセットすると入力とフィードバックが復元されます。
コレクション項目とネイティブの妥当性 パーマリンク
Item は選択肢と説明を配置し、Validity は検証ルールを重複させずに現在の状態を公開します。
API
TRField.Root
| プロパティ | 型 / 既定値 | 用途 |
|---|---|---|
name | string | フィールドを命名し、Control.name より優先します |
disabled | boolean / false | コントロールを無効化し、すべてのパーツに data-disabled を付与します |
invalid, dirty, touched | boolean | 外部で管理するフィールドの状態 |
validate | 同期・非同期バリデーター | エラー、エラー配列、または null を返します |
validationMode | 'onSubmit' | 'onBlur' | 'onChange' / 'onSubmit' | 検証タイミング |
validationDebounceTime | number / 0 | onChange 検証のデバウンス時間（ミリ秒） |
actionsRef | RefObject<TRFieldRootActions> | validate() を公開します |
Control はネイティブ入力のプロパティ、value / defaultValue、onValueChange(value, details) を受け取ります。サイズは Root ではなくコントロールに指定します。Control は uiSize?: 'md' | 'lg'（既定値 md）を受け取り、ほかの Tinyrack コントロールも同じプロパティを持つため、Root の内側でも単独でも同じルールで指定できます。Label.nativeLabel={false} は、render が label 以外のホスト要素を使う場合に指定します。Error.match は true または valueMissing などの ValidityState のキー、Item.disabled は単一の選択肢の無効化、Validity は validity、value、initialValue、error、errors を提供します。
すべてのホストパーツは ref、ネイティブ属性・イベント、関数形式の className / style、Base UI の render を保持します。名前空間、7 つの名前付きパーツ、各プロパティ・状態型、TRFieldRootActions、TRFieldValidityData、Control の変更イベント型はすべて個別にエクスポートされます。CSS は明示的に読み込みます。