AI に設定ウィザード（検証つき多段フォーム）を作らせてみた — "見た目" はあるが "フォームの仕組み" が無い（やってみた #29）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は ⁠マルチステップの設定ウィザード（バリデーション＋確認ステップ）⁠。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は「ワークスペース作成」4ステップ: アカウント→組織→設定→確認。⁠Next を押すと必須/形式をチェック→止める→その場にエラー表示→最初の不正なフィールドへフォーカス移動⁠、確認ステップで編集にジャンプ＋規約に同意で送信。⁠フォームの入力チェックの軸⁠を初めて深く突きました。

結果 — 3.5/5

検証付き4ステップのウィザードは⁠完璧に動きました⁠（最初のエラーへフォーカス・aria-invalid とエラー表示の連携・ステップの読み上げ・375px でのはみ出し0・ダーク完全）。個々の入力欄は綺麗で、まずまずアクセシブル。

そして⁠前ラウンドの修正が、また検証されました⁠:

⁠Checkbox の label/description（#149・前回!）と Switch（#130）が本当に良い⁠——内部で生成した id で aria を自動で配線。RadioGroup も本物の標準的な支援技術対応。Input は aria-invalid で赤枠が自動。

3.5 止まりの理由は品質ではありません。⁠「フォームの 仕組み」が無い⁠からです。

核心の欠落 — Form は "見た目" だけ

⁠Form/FormField/FormMessage は名前だけで中身が空っぽ（#152・重大）。⁠ 状態の共有も、状態管理も、aria も無い。FormMessage は素の <p class="text-destructive">——⁠id も付かず、フィールドに紐付かず、役割も無い⁠。shadcn/react-hook-form の FormField パターンを、名前は約束するのに、中身が無い。

結果、⁠フィールドごとに手組み（~90行）⁠: id の生成・aria-describedby の組み立て・aria-invalid の切り替え・必須マーク・role="alert"・最初のエラーへフォーカス。⁠「個々のアクセシブルな入力欄はある、でも ラベル/コントロール/説明/エラー を協調させる層が無い」⁠＝フォームの仕組みの不在です。

今ラウンドの修正（ソースで反映）

エラー表示のバラつきと Combobox のアクセシビリティを直しました:

• ⁠#153⁠: Input だけが持っていた aria-invalid: の赤枠を ⁠Select/Textarea/PasswordInput にも⁠。特に ⁠PasswordInput は、className がラッパーに当たって input に届かず、aria-invalid でも赤枠が出ない実バグ⁠でした→ input に当たるように＋inputClassName prop を追加。ブラウザで実証: aria-invalid の枠が rgb(252,176,176)（エラー色）に。
• ⁠#155⁠: Combobox が aria-invalid/describedby を受け取れなかった（HTML 属性を引き継いでいなかった）→ トリガー側へ受け渡す。必須の Combobox をエラー状態にできるように。
• ⁠#156 Textarea の w-[280px] 固定⁠（固定寸法の種類）はスタイル指定でロックされている＝.pen 案件→ Codex 指示書へ。

目玉の ⁠フォームの仕組み（#152）は beta ゲート⁠（FormField の状態共有を作る大物）です。

学び — "アクセシブルなコンポーネント" と "フォームの仕組み" は別物

持っている: 個々にアクセシブルな入力欄（Input/Checkbox/Switch/RadioGroup）＋ 色調/エラーの見た目
無い:       それらを協調させるフォームの仕組み（id/aria の配線・エラー状態・入力チェック・フォーカス）

⁠良いコンポーネントは揃っています。足りないのは "つなぐ層"。⁠ #28 の「選択を持つコレクション」、#27 の「予定表の表示層」と同じ——⁠コンポーネント単体は強い、欠けているのは "上位でまとめるコンポーネント"⁠ です。Form は名前が振る舞いを約束しているぶん、その差が一番くっきり出ました。

次回予告（やってみた #30）

• ⁠エラー画面 / 通知トースト周り / ダッシュボード設定⁠ ほか。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#28
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。コンポーネントはアクセシブル、次は "つなぐフォームの仕組み"。