フォームFormExperimental
ラベル、入力欄、説明、エラーメッセージを一貫した余白と状態で組み合わせるフォームプリミティブです。
プレビュー
状態とバリエーション
送信時の入力確認
入力内容の問題は警告色のメッセージで表示し、入力欄にもエラー状態を付与します。入力中ではなく送信時に検証すると、不要なエラー表示を減らせます。
送信中
送信中はボタンを無効化し、読み込みアイコンと状態テキストに切り替えます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| (Form) | FormHTMLAttributes<HTMLFormElement> | — | 最上位のフォーム要素です。送信時の処理などを渡します。 |
| (FormField) | HTMLAttributes<HTMLDivElement> | — | ラベル、入力欄、補助テキストをまとめる 1 行分のコンテナです。 |
| (FormGroup) | HTMLAttributes<HTMLDivElement> | — | アプリ内フォーム向けのコンパクトな行です。余白を抑え、入力欄やテキストエリアをグループ幅に揃えます。 |
| (FormLabel) | LabelHTMLAttributes<HTMLLabelElement> | — | 入力欄のラベルです。対応する入力欄の ID と紐づけます。 |
| (FormControl) | HTMLAttributes<HTMLDivElement> | — | 入力欄、選択欄、テキストエリアなど、実際の入力 UI を包みます。 |
| (FormDescription) | HTMLAttributes<HTMLParagraphElement> | — | 入力欄の下に表示する補助テキストです。 |
| (FormMessage) | HTMLAttributes<HTMLParagraphElement> | — | 入力内容の問題を伝えるメッセージです。警告色で表示されます。 |
使い方
Loading...