Tinyrack

Form

送信、妥当性、Base UI field のエラーに対応するネイティブフォームラッパーです。

主なプロパティ

項目説明
送信ネイティブの submit イベントと FormData、または onFormSubmit で解析されたフィールド値を使用します。
検証ネイティブ validity と、Base UI の TRField.Error コンポジションで表示する外部 errors を組み合わせます。
リセットネイティブの type="reset" は非制御値を復元します。制御値とアプリケーション結果は onReset でリセットします。
状態control は非制御またはアプリケーション制御で利用でき、server error と送信結果はアプリケーションが所有します。

インストール

pnpm add @tinyrack/ui

長い行はコード領域を横にスクロールして確認できます。

スタイル

@import '@tinyrack/ui/components/form.css';

長い行はコード領域を横にスクロールして確認できます。

インポート

import { TRForm } from '@tinyrack/ui/components/form';
import { TRField } from '@tinyrack/ui/components/field';
import { TRInput } from '@tinyrack/ui/components/input';
import { TRButton } from '@tinyrack/ui/components/button';

長い行はコード領域を横にスクロールして確認できます。

プレイグラウンド

使用方法

ネイティブの FormData とリセット パーマリンク

送信すると FormData から名前付きの入力を読み取ります。リセットすると初期の非制御値が復元され、送信結果が消去されます。

例

必須送信と復旧 パーマリンク

空のまま送信してエラーを確認し、ラック名を入力してもう一度送信すると成功を確認できます。

サーバーエラーと復旧 パーマリンク

ラックアルファを選ぶと、サーバーによる拒否を再現します。編集すると TRField のエラーが消え、再送信が成功します。ネイティブのリセットでは、値と結果の両方が消去されます。

命令型の検証と最初の無効項目へのフォーカス パーマリンク

`actionsRef` を使うと、名前付きの TRField 1 つまたはフォーム全体を検証できます。ネイティブ送信では最初の無効な TRField コントロールへフォーカスが移り、型付けされた `onFormSubmit` の値は文字列として安全に扱えます。

API

TRForm はネイティブの form プロパティ、ref、イベント、className、style、render を転送し、各コントロールは自身の値を管理します。TRFormProps<Values> は onFormSubmit(values, details) を通じてフィールド値のジェネリックを保持し、イベント詳細には TRFormSubmitEventDetails と TRFormSubmitEventReason を利用できます。サーバーの応答にはフィールド名と errors を使い、validationMode は TRForm または TRField のスコープで選びます。送信を発生させずに明示的に検証するには TRFormActions.validate(name?) を使います。ネイティブのリセットで復元されるのは非制御のコントロールだけなので、制御値はアプリケーションの onReset ハンドラーでリセットしてください。